vue项目调用百度地图api 学习总结

一、安装百度地图插件：

npm install vue-baidu-map –save

二、在vue项目首页index.html进入插件：

注:src里的http必须要写如果不写会出现bug! ! !

没有秘钥可以点击http:// http://lbsyun.baidu.com/apiconsole/key进去获取

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

三、下面开始写核心代码：

<template>
  <div class="baidumap" id="allmap"></div>
</template>


</script>
<script>
  export default {
    mounted() {
      this.baiduMap()
    },
    methods: {
      baiduMap() {
        let map = new BMap.Map('allmap');
        let point = new BMap.Point(115.043096, 38.592132) //创建点坐标
        map.centerAndZoom(point, 12) //初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl()) //地图控柄
        map.addControl(new BMap.ScaleControl()) //实际距离显示
        map.addControl(new BMap.OverviewMapControl())
        // map.setMapStyle({ style: 'midnight' }) //地图主题
        let marker = new window.BMap.Marker(point); //创建柱标
        map.addOverlay(marker) //将标注添加到地图中
        //提示信息
        var infoWindow = new BMap.InfoWindow('提示信息')
        // 鼠标移上标注点要发生的事
        marker.addEventListener('mouseover', function() {
          this.openInfoWindow(infoWindow)
        })
        // 鼠标移开标注点要发生的事
        marker.addEventListener('mouseout', function() {
          this.closeInfoWindow(infoWindow)
        })
        console.log(marker)
      }
    }
  }
</script>

<style >
  .baidumap {
    width: 1000px;
    height: 500px;
    border: 1px solid red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  /* 删除百度地图版权字 与 百度logo */
  .baidumap>.BMap_cpyCtrl {
    display: none !important;
  }

  .baidumap>.anchorBL {
    display: none !important;
  }
</style>

四、百度地图其他new BMap.Map()相关API：

https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b0

五、最终效果：

CSDN社区 《创作达人》活动，只要参与其中并创作文章就有机会获得官方奖品：精品日历、新程序员杂志，快来参与吧！链接直达 https://bbs.csdn.net/topics/605272551