好客租房166-根据定位获取当前城市-阿里云开发者社区

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

2022-06-14 122

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 好客租房166-根据定位获取当前城市

1实现步骤

打开百度文字标签demo

2创建label对象

3调用setStyle样式

4在map对象上调用addOverlay()方法将文本覆盖物覆盖上

图片.png

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() {
    this.initMap()
  }
  initMap() {
    //获取
    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) // 初始化地图，设置中心点坐标和地图级别
    /* 
            1 创建 Label 实例对象。
            2 调用 setStyle() 方法设置样式。
            3 在 map 对象上调用 addOverlay() 方法，将文本覆盖物添加到地图中。
          */
    const opts = {
      position: point,
      // offset: new BMap.Size(30, -30)
    }
    const labelList = new window.BMapGL.Label('文本覆盖物', opts)
    // 设置样式
    labelList.setStyle({
      color: 'green',
    })
    // 添加覆盖物到地图中
    map.addOverlay(labelList)
  }
  render() {
    return (
      <div className={styles.map}>
        {/* 顶部导航栏组件 */}
        <NavHeader onLeftClick={() => {}}>地图找房</NavHeader>
        <div id="container" className={styles.container}></div>
      </div>
    )
  }
}