百度地图的集成主要是Vue的功能,所以我们先在Vue项目里面修改

1.打开百度地图的控制台 登录百度帐号这个网站,然后登录进去,创建自己的应用,你会得到一个ak。

注意:你创建的是一个浏览器的应用。

2.打开 index.html,加上百度地图api的脚本,注意这个脚本后面带了 ak,这个ak就是上一步你申请的ak,你需要填写你自己的ak。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你自己的ak填在这里"></script>

3.新建一个Map.vue,来创建自己的百度地图应用。

它的内容非常简单,就是一个 div 作为百度地图显示的容器,你可以通过 style 来控制它的宽高,我这里是主体的全屏。

然后在 script 里面,你需要对百度地图的容器进行初始化,设置中心点,我这里做了一个定位的设置。

let map;
export default {
  name: "Map",
  data() {
    return {
    }
  },
  mounted() {
    // 百度地图API功能
    map = new BMap.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
   // 开启定位
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // alert('您的位置:'+r.point.lng+','+r.point.lat);
      }
      else {
        // alert('failed'+this.getStatus());
      }
    });
  }
}
​

更多关于百度地图的api,请参考官网的例子:

地图 JS API | 百度地图API SDK

设置完这些,再配置下路由,你的百度地图就可以显示啦:

在这个示例 DEMO里有很多现成的功能,你可以直接copy,非常好用

地图JS API示例 | 百度地图开放平台

Logo

前往低代码交流专区

更多推荐