1.4根据定位展示当前城市
1获取当前定位城市
2使用地址解析器获取城市坐标
3调用centerAndZoom
4在地图中添加比例尺和平移缩放
import React from 'react' // 导入样式 // import './index.scss' import styles from "./index.module.scss" import NavHeader from '../../components/NavHeader'; export default class Map extends React.Component { componentDidMount() { //获取 const {label,value} =JSON.parse(localStorage.getItem("hkzf_city")) console.log(label,value) //创建地址解析器 const myGeo=new window.BMapGL.Geocoder() myGeo.getPoint(label,(point)=>{ if(point){ map.centerAndZoom(point,11) // map.addOverlay(new window.BMapGL.Market(point)) map.addControl(new window.BMapGL.NavigationControl()) map.addControl(new window.BMapGL.ScaleControl()) } },label) var map = new window.BMapGL.Map("container"); // 创建地图实例 var point = new window.BMapGL.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 } render() { return ( <div className={styles.map}> {/* 顶部导航栏组件 */} <NavHeader onLeftClick={()=>{ }}> 地图找房 </NavHeader> <div id="container" className={styles.container}></div> </div> ) } }
运行结果