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

简介: 好客租房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>
    )
  }
}

运行结果

图片.png

相关文章
好客租房166-根据定位获取当前城市
好客租房166-根据定位获取当前城市
83 0
好客租房166-根据定位获取当前城市
|
缓存
好客租房150-切换城市
好客租房150-切换城市
97 0
好客租房150-切换城市
|
定位技术
好客租房173-地图找房createCircle方法
好客租房173-地图找房createCircle方法
180 0
好客租房173-地图找房createCircle方法
|
索引
好客租房144-渲染城市列表
好客租房144-渲染城市列表
107 0
好客租房144-渲染城市列表
|
定位技术
好客租房171-地图找房renderOverlays
好客租房171-地图找房renderOverlays
115 0
好客租房171-地图找房renderOverlays
好客租房176-获取房源数据优化
好客租房176-获取房源数据优化
112 0
好客租房176-获取房源数据优化
好客租房132-城市选择导航栏
好客租房132-城市选择导航栏
87 0
好客租房132-城市选择导航栏
好客租房175-获取当前小区被点击房源数据
好客租房175-获取当前小区被点击房源数据
95 0
好客租房175-获取当前小区被点击房源数据
|
索引
好客租房131-城市功能选择分析
好客租房131-城市功能选择分析
82 0
好客租房137-获取当前定位数据的函数
好客租房137-获取当前定位数据的函数
51 0