實現(xiàn)地圖拖拽選址功能，百度地圖并未像高德地圖拖拽選址功能 。由于項目需要，在百度地圖的基礎(chǔ)上實現(xiàn)簡單的拖拽功能。大神掠過～～

MapDemo下載

實現(xiàn)思路

1. 獲取地圖的中點經(jīng)緯度。
2. 獲取地圖拖拽回調(diào)事件。
3. 將大頭針圖片底部固定在地圖的正中央。

引用百度地圖sdk

在index.html中引用

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=GbhBTuY8EQf5N8iy8Nklz651Gg6l6W1N&type=lite&v=1.0"></script>

組件中實現(xiàn)地圖

map 是地圖；
center-point 是打頭針；
point 是標示地圖中點位置；

代碼如下：

<template>
    <div class="map-wrap">
      <div id="map"></div>
      <div class="center-point"></div>
      <div class="point"></div>
    </div>
</template>

<script>
  export default {
    data(){
      return{}
    },
    mounted(){
      this.mapCenter();
    },
    methods: {
      mapCenter(){
        // 百度地圖API功能
        var map = new BMap.Map("map");
        var point = new BMap.Point(114.025973657,22.5460535462);
        map.centerAndZoom(point, 14);
        map.addEventListener("dragend",attribute);
        function attribute() {
          console.log(map.centerPoint);
          // alert("地圖中點的位置是" + map.centerPoint.lng + "," + map.centerPoint.lat);
        }
      },
    }
  }
</script>

<style scoped>
  .map-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #map{
    width: 100%;
    height: 100%;
    position: relative;
  }

  .center-point{
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    margin: 0 auto;
    margin-top: -50px;
    width: 40px;
    height: 50px;
    background: url("../../assets/logo-2.png") center no-repeat;
    background-size: contain;
  }

  .point{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
  }
</style>

大神略過~~, 如有問題，歡迎討論