vue 百度地图的引用(vue-Baidu-Map)

参考文章：https://www.cnblogs.com/zqyw/p/11132152.html 和 https://www.cnblogs.com/tinyphp/p/3949715.html
api参考：https://www.cnblogs.com/shuaifing/p/8195776.html

步骤：
1、安装

$ npm install vue-baidu-map --save

2、全局注册，在main.js中引入以下代码

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '你申请的key'
})

3、页面上使用

<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="width:100%;height:100%" @click="getClickInfo" :scroll-wheel-zoom='true'>
    </baidu-map>
</template>
<script>
export default {
  name: 'TestBaiDu',
  data () {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler ({BMap, map}) {
      // 初始化地图,设置中心点坐标
      var point = new BMap.Point(119.8025089500, 25.4890556400)
      map.centerAndZoom(point, 13)
      
      // 添加鼠标滚动缩放
      map.enableScrollWheelZoom();
      // 添加缩略图控件
      map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
      // 添加缩放平移控件
      map.addControl(new BMap.NavigationControl());
      //添加比例尺控件
       map.addControl(new BMap.ScaleControl());
       //添加地图类型控件
       //map.addControl(new BMap.MapTypeControl());
    
       //设置标注的图标
       var icon = new BMap.Icon("./static/img/map.png",new BMap.Size(100,100));
       //设置标注的经纬度
       var marker = new BMap.Marker(new BMap.Point(121.160724,31.173277),{icon:icon});
       //把标注添加到地图上
       map.addOverlay(marker);
       var content = "<table>";
       content = content + "<tr><td> 编号：001</td></tr>";
       content = content + "<tr><td> 地点：上海汉得信息技术股份有限公司</td></tr>";
       content = content + "<tr><td> 时间：2018-1-3</td></tr>";
       content += "</table>";
       var infowindow = new BMap.InfoWindow(content);
      // 图标点击的时候显示标注
       marker.addEventListener("click",function(){
            this.openInfoWindow(infowindow);
       });
        // 标注默认显示
       // var infoWindow = new BMap.InfoWindow(content) // 创建信息窗口对象
       // map.openInfoWindow(infoWindow, point)
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
  }
}

改变标注的样式圆角 改变标注样式其实就是要搞清楚样式的层级关系

/* 地图标注圆角显示 */
.BMap_bubble_title{
  color:black;
  font-size:13px;
  font-weight: bold;
  text-align:left;
}
.BMap_pop div:nth-child(1){
  border-radius:7px 0 0 0;
}
.BMap_pop div:nth-child(3){
  border-radius:0 7px 0 0;background:#ABABAB;;
  /*background: #ABABAB;*/
  width:23px;
  width:0px;
  height:10px;
}
.BMap_pop div:nth-child(3) div{
  border-radius:7px;
}
.BMap_pop div:nth-child(5){
  border-radius:0 0 0 7px;
}
.BMap_pop div:nth-child(5) div{
  border-radius:7px;
}
.BMap_pop div:nth-child(7){
  border-radius:0 0 7px 0 ;
}
.BMap_pop div:nth-child div(7) {
  border-radius:7px ;
}
// 标注右上角的关闭按钮隐藏
.BMap_pop>img {
  display: none;
}