好客租房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

相关文章
|
数据可视化 定位技术
部分省会城市公交路线以及公交站点数据分享
最近在做一个城市公交行驶路线优化的研究,收集到了部分城市的公交路线和公交站数据2018年(北京 上海 广州 成都 大连 福州 杭州 合肥 济南 南京 青岛 厦门 深圳 沈阳 苏州 天津 武汉 西安 长春 长沙)都是shp格式
149 0
好客租房166-根据定位获取当前城市
好客租房166-根据定位获取当前城市
117 0
好客租房166-根据定位获取当前城市
|
缓存
好客租房150-切换城市
好客租房150-切换城市
113 0
好客租房150-切换城市
|
定位技术
好客租房173-地图找房createCircle方法
好客租房173-地图找房createCircle方法
214 0
好客租房173-地图找房createCircle方法
|
定位技术
好客租房171-地图找房renderOverlays
好客租房171-地图找房renderOverlays
140 0
好客租房171-地图找房renderOverlays
|
索引
好客租房144-渲染城市列表
好客租房144-渲染城市列表
130 0
好客租房144-渲染城市列表
好客租房176-获取房源数据优化
好客租房176-获取房源数据优化
130 0
好客租房176-获取房源数据优化
好客租房132-城市选择导航栏
好客租房132-城市选择导航栏
107 0
好客租房132-城市选择导航栏
好客租房175-获取当前小区被点击房源数据
好客租房175-获取当前小区被点击房源数据
110 0
好客租房175-获取当前小区被点击房源数据
|
索引
好客租房131-城市功能选择分析
好客租房131-城市功能选择分析
100 0