vue calls Baidu map to dynamically modify the center point

Initialize the map
initialApi () {       var map = new BMap.Map("allmap")

      //The position of the center point when initializing the map is Shenzhen
      var point = new BMap.Point('Shenzhen')
      //var point = new BMap.Point(116.3972282409668,39.90960456049752)
     
      map.centerAndZoom(point, 12)
      this.myDis = new BMapLib.DistanceTool(map);

      map.enableScrollWheelZoom(true)
      map.addControl(new BMap.NavigationControl())
      map.addControl(new BMap.ScaleControl())
      map.addControl(new BMap.OverviewMapControl())

      function myFun(result){         var cityName = result.name         map.setCenter(cityName)       }       //var myCity = new map.LocalCity()       var myCity = new BMap.LocalCity()       myCity.get(myFun)       this.map = map     }, 1. Modify the center point: function apiLine(api, color) {         let list = []         let result = api.sort(function(a, b) {           return (             parseInt(a.lineOrder) - parseInt(b.lineOrder)           ) }         )         //Get the latitude and longitude of the center point to be modified         let lon = result[0].lon;         let lat = result[0].lat;



















        for (let i = 0; i < result.length; i++) {
          let point = new BMap.Point(result[i].lon, result[i].lat)
          list.push(point)
        }
        var polyline = new BMap.Polyline(list, {strokeColor: color, strokeWeight: 1.5, strokeOpacity: 1});  //创建折线
        if (that.lineCheckbox) {
          //修改中心点
          that.map.centerAndZoom(new BMap.Point(lon, lat), 12); 
          that.map.addOverlay(polyline)
        } else {
          that.map.clearOverlays()
        }
      }

Guess you like

Origin blog.csdn.net/xxaann/article/details/86525225