vue中使用百度地图

Posted 2023-02-09 web-gmy

1、申请百度地图开发者秘钥

2、在index.html中引入

    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的秘钥"></script>

3、在webpack.base.conf.js中添加配置

 entry: 
    app: './src/main.js'
  ,
  externals: 
    BMap: "BMap"
  ,

4、引入

import BMap from "BMap";

5、使用

 var map = new BMap.Map("map");
      map.centerAndZoom(
        new BMap.Point(this.formData.long, this.formData.lati),
        12
      );
      var time, distance;
      var searchComplete = function (results) 
        if (transit.getStatus() != BMAP_STATUS_SUCCESS) 
          return;
        
        var plan = results.getPlan(0);
        time = plan.getDuration(true); //获取时间
        distance = plan.getDistance(true); //获取距离
        starts.time = time;
        starts.distance = distance;
      ;
      var transit = new BMap.DrivingRoute(map, 
        renderOptions:  map: map ,
        onSearchComplete: searchComplete,
      );
      var start = new BMap.Point(starts.lng, starts.lat);
      var end = new BMap.Point(this.formData.long, this.formData.lati);
      transit.search(start, end);