vue中使用百度地图

Posted web-gmy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中使用百度地图相关的知识,希望对你有一定的参考价值。

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);

以上是关于vue中使用百度地图的主要内容,如果未能解决你的问题,请参考以下文章

vue 使用百度地图(vue-Baidu-Map)

Vue中如何使用百度地图

vue 使用百度地图:搜索定点

百度地图百度地图的使用方法 和 在vue中如何使用百度地图(超详细)

VUE 中引入百度地图

Vue+Antd搭配百度地图实现搜索定位等功能