Taro之百度地图显示定位点和信息

佚名 6年前 (2019-04-08) 随笔 796人围观抢沙发百度已收录

由于没有后台数据就随机生成点来模拟了。具体代码如下。

componentDidMount = () => {
    const { BMap, BMAP_STATUS_SUCCESS } = window
    let map = new BMap.Map("container")
    let poi

    let geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        poi = new BMap.Point(r.longitude, r.latitude)
        map.centerAndZoom(poi, 15)
        function addMarker(point, index) {
          let myIcon = new BMap.Icon(businessl, new BMap.Size(20, 20), {
            anchor: new BMap.Size(0, 0),
            imageOffset: new BMap.Size(0, 0 + index - index),
            imageSize: new BMap.Size(20, 20),
            infoWindowAnchor: new BMap.Size(0, 0)
          })
          let marker = new BMap.Marker(point, { icon: myIcon })
          map.addOverlay(marker)
          marker.addEventListener("click", function () {
            let opts = { width: 200, height: 100, title: String(index) }
            let infoWindow = new BMap.InfoWindow(String(index), opts)
            marker.openInfoWindow(infoWindow)
          })
        }
        let bounds = map.getBounds()
        console.log(bounds)
        let lngSpan = bounds.He - bounds.Le
        let latSpan = bounds.Vd - bounds.Xd
        for (let i = 0; i < 10; i++) {
          let point = new BMap.Point(bounds.Le + lngSpan * (Math.random() * 0.7 + 0.15),
            bounds.Xd + latSpan * (Math.random() * 0.7 + 0.15))
          addMarker(point, i)
        }
      }
    })
  };