基于百度地图实现坐标打点

武当王也拜见老天师

已于 2023-03-31 17:41:47 修改

阅读量668

点赞数

文章标签：前端 vue

于 2023-03-31 17:38:41 首次发布

本文链接：https://blog.csdn.net/Oct_Somnus/article/details/129885365

版权

基于百度地图实现坐标打点，先上效果图

再接全部代码

<template>
  <div id="test">
    <baidu-map class="bm-view" @ready="init">
      <bm-marker v-for="item in maps" :key="item.id"
                 :position="{lng: item[0], lat: item[1]}"
      >
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {

  },
  data(){
    return {
      maps: [
        ['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>"],
      ]
    }

  },
  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, 5)    //
      map.setCurrentCity('西安')   // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true)    //鼠标滚动缩放
      // 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);               // 将标注添加到地图中
      }
    },

  },
  mounted(){
    this.init()
  }
}
</script>
<style>
#test { height: 98vh; width: 100%; background-color: rgb(192, 228, 127); }
.bm-view { width: 100%; height: 100%; }
</style>