好客租房165-根据定位获取当前城市

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>
    )
  }
}

运行结果