vue 騰訊地圖 實現拖拽/搜索改變中心標記位置

需求：拖拽地圖的時候 ，搜索框內容變更時 騰訊地圖中心標記點跟着改變

 

1，在index.html中引入 <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=換成你申請的key"></script> 

key的申請可以點擊這里https://lbs.qq.com/，流程大概是：登錄->點擊開發者信息->點擊key管理，創建新密鑰，填寫相應信息即可

2,在需要使用的頁面 html中 加入  <div id="map"></div>

參考鏈接：

騰訊地圖

https://lbs.qq.com/javascript_v2/doc/geocoder.html

https://lbs.qq.com/webDemoCenter/javascriptV2/jsGuide/jsOverview

初版代碼如下，加了注釋，應該看得懂哈

<template>
  <div>
    <div class="hole">
      <input type="text" v-model="searchAdress" class="searPart" />
      <van-button type="primary" class="searPart" @click="updateDeviceAddress">確定</van-button>
    </div>
    <div id="map" style="width:100%" :style="{ height: centerHeight }"></div>
    <div id="centerDiv"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchAdress: '', // 搜索地址
      centerHeight: '', // 地圖的高度
      geocoder: null, // 地址解析類。用於在地址和經緯度之間進行轉換的服務。
      isDragend: false, // 標識地圖  是拖拽 還是搜索
      deviceInfo: { Longitude: '', Latitude: '' }, // 設備原始信息
      marker: null
    }
  },
  methods: {
    // 確定更新機器位置
    updateDeviceAddress() {
      console.log(this.marker.position.lat)
      console.log(this.marker.position.lng)
    },
    init() {
      debugger
      const that = this
      //   初始化地圖 設備信息沒有經緯度時，設定公司經緯度
      if (that.deviceInfo.Longitude === '' || that.deviceInfo.Latitude === '') {
        that.deviceInfo.Longitude = '119.9690330000' // 經度
        that.deviceInfo.Latitude = '30.2212330000' // 緯度
      }
      // 中心點

      var center = new qq.maps.LatLng(that.deviceInfo.Latitude, that.deviceInfo.Longitude)
      var map = new qq.maps.Map(document.getElementById('map'), {
        center: center,
        draggable: true, // 設置地圖可拖拽
        zoom: 13
      })
      // 標記點
      that.marker = new qq.maps.Marker({
        position: center,
        map: map
      })
    // 地址和經緯度之間進行轉換服務
      that.geocoder = new qq.maps.Geocoder()
      // 設置服務請求成功的回調函數
      that.geocoder.setComplete(function(result) {
       
        map.setCenter(result.detail.location)
        if (!that.marker) {
          //   標記不存在 創建
          that.marker = new qq.maps.Marker({
            position: result.detail.location,
            map: map
          })
        } else {
          //   標記已存在 更新
          that.marker.setPosition(result.detail.location)
        }
       // 是拖拽的回調，更新搜索框內容

        if (that.isDragend) {
          that.searchAdress = result.detail.address
        }
      })
      qq.maps.event.addListener(map, 'dragend', function() {     
        that.isDragend = true
        var pt = map.getCenter()
        var latLng = new qq.maps.LatLng(pt.lat, pt.lng)
        // 經緯度解析成地址
        that.geocoder.getAddress(latLng)
      })
    },
    // 獲取設備信息
    getDeviceInfo() {
      this.$store
        .dispatch('home/deviceInfo', { deviceid: 1540 })
        .then(data => {
          this.deviceInfo = data.data
          this.init()
        })
        .catch(e => {})
    }
  },
  watch: {
    // 監聽搜索框內容的變更
    searchAdress(v) {
      //防止拖拽回調更新searchAdress后，再次請求地圖服務
      if (!this.isDragend) {
        // 地址解析成經緯度
        this.geocoder.getLocation(v)
      }
      this.isDragend = false
    }
  },
  created() {},
  mounted() {
    this.centerHeight = window.innerHeight - 70 + 'px'
    // 獲取設備信息
    this.getDeviceInfo()
  }
}
</script>
<style lang="scss" scoped>
.hole {
  //   padding: 0 5px;
  width: 100%;
  text-align: center;
  .searPart {
    width: 98%;
    height: 30px;
    margin-top: 5px;
  }
}
</style>
<style>
/* 去除地圖水印 開始 */
[title='到騰訊地圖查看此區域'] {
  display: none !important;
}
#map div div div span {
  display: none !important;
}
/* 去除地圖水印 結束 */
</style>