vue 百度地图

main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'rQxHPQX1ua21rWnXzTbUh5KSSUbnefxR'
});

<template>
  <div id="test">
    <baidu-map class="bm-view" @ready="init"></baidu-map>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {};
  },
  methods: {
    init({ BMap, map }) {
      this.map = map;
      var point = new BMap.Point(108.953723, 34.276202); //设置城市经纬度坐标
      // var cityCtrl = new BMap.CityListControl()    //城市下来框选择定位
      // map.addControl(cityCtrl)
      // var locationCtrl = new BMap.LocationControl()
      map.centerAndZoom(point, 10); //
      map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //鼠标滚动缩放
      var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
      map.addControl(scaleCtrl);
      // 绘制圆
      var circle = new BMap.Circle(
        new BMap.Point(108.953723, 34.276202),
        5000,
        {
          strokeColor: "blue",
          strokeWeight: 2,
          strokeOpacity: 0.5,
        }
      );
      map.addOverlay(circle);
      // 绘制面
      var polygon = new BMap.Polygon(
        [
          new BMap.Point(108.353723, 34.476202),
          new BMap.Point(108.353721, 34.376201),
          new BMap.Point(108.253722, 34.276202),
          new BMap.Point(108.953723, 34.276203),
          new BMap.Point(108.153723, 34.176203),
        ],
        {
          strokeColor: "blue",
          strokeWeight: 2,
          strokeOpacity: 0.5,
        }
      );
      map.addOverlay(polygon);
      // var zoomCtrl = new BMap.ZoomControl(); // 添加缩放控件
      // map.addControl(zoomCtrl);
      // map.setHeading(60) //设置地图旋转角度
      // map.setTilt(73)   //设置地图倾斜角度
      // map.setMapStyle({styleJson: CUSTOM_MAP_CONFIG})    //导入主题样式

      var data_info = [
        [
          110.229321,
          25.227083,
          "地址：广西省桂林市七星区<h4><a target='_blank' href='http://000.00.00.000:49151' style='color:blue;'>AAAA</a></h4>",
        ],
        [
          104.979273,
          25.096498,
          "地址：贵州省黔西南布依族自治州<h4><a target='_self' href='http://000.00.00.000:49152' style='color:blue;'>BBB</a></h4>",
        ],
        [
          112.60061,
          37.74101,
          "地址：山西省太原市小店区经济开发区 <h4><a target='_blank' href='http://000.00.00.000:49153' style='color:blue;'>CCC</a></h4>",
        ],
        [
          109.944203,
          40.764037,
          "地址：内蒙古省包头市石拐区<h4><a target='_blank' href='http://000.00.00.000:49154' style='color:blue;'>DDDD</a></h4>",
        ],
        [
          126.448706,
          45.959158,
          "地址：黑龙江省哈尔滨市呼兰区新立屯 <h4><a target='_self' href='http://000.00.00.000:49100' style='color:blue;'>EEEE</a></h4>",
        ],
        [
          96.448706,
          30.959158,
          "地址：黑龙江省哈尔滨市呼兰区新立屯 <h4><a target='_blank' href='http://000.00.00.000:49156' style='color:blue;'>FFF</a></h4>",
        ],
      ];
      var opts = {
        min_width: 250, // 信息窗口zuixiao宽度
        min_height: 80, // 信息窗口高度
        title: "详细信息", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
      };
      for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(
          new BMap.Point(data_info[i][0], data_info[i][1])
        ); // 创建标注
        var content = data_info[i][2];
        map.addOverlay(marker); // 将标注添加到地图中
        // addClickHandler(content,marker);
      }
      // function addClickHandler(content,marker){
      //     marker.addEventListener("click",function(e){
      //         openInfo(content,e)}
      //     );
      // }
      // function openInfo(content,e){
      //     var p = e.target;
      //     var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      //     var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
      //     map.openInfoWindow(infoWindow,point); //开启信息窗口
      // }

      // //向地图中添加缩放控件
      // var ctrl_nav = new BMap.NavigationControl({anchor:CUSTOM_MAP_CONFIG,type:CUSTOM_MAP_CONFIG});
      // map.addControl(ctrl_nav);
      // //向地图中添加缩略图控件
      // var ctrl_ove = new BMap.OverviewMapControl({anchor:CUSTOM_MAP_CONFIG,isOpen:1});
      // map.addControl(ctrl_ove);
      // //向地图中添加比例尺控件
      // var ctrl_sca = new BMap.ScaleControl({anchor:CUSTOM_MAP_CONFIG});
      // map.addControl(ctrl_sca);

      // map.addEventListener('click',function(e){
      //     console.log(e);
      // alert('经度：' + e.point.lng + '\n纬度：' + e.point.lat)
      // window.location.href = 'http://114.116.211.121:49151'
    },
  },
  mounted() {
    // this.init()
  },
};
</script>
<style>
#test {
  display: flex;
  justify-content: center;
  height: 98vh;
  width: 100%;
  background-color: rgb(192, 228, 127);
}
.bm-view {
  width: 80%;
  height: 80%;
}
</style>