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

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

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)

        }

      }

    })

  };