用Vue和高德地图赋能您的网站：搜索地址、添加标记、定位与拖拽选址

如今，随着互联网的发展，地图服务已成为必不可少的工具之一。在网站中添加地图功能，可以为用户提供更加直观的地理信息，增强网站的实用性和交互性。

在这篇文章中，我们将使用Vue.js和高德地图，一步步实现地址搜索、标记添加、定位和拖拽选址的功能。

首先，我们需要在Vue项目中引入高德地图的JavaScript API。在<script>标签中添加以下代码：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图密钥"></script>

接下来，在Vue组件中，我们可以使用高德地图提供的JavaScript API来实现地图的功能。以下是实现地址搜索、标记添加、定位和拖拽选址的代码：

import AMap from 'AMap'

export default {
  data() {
    return {
      map: null,
      marker: null,
      address: '',
      dragMarker: false
    }
  },
  mounted() {
    this.map = new AMap.Map('map', {
      zoom: 11,
      center: [116.397428, 39.90923]
    })
    this.addMarker(116.397428, 39.90923)
  },
  methods: {
    addMarker(lng, lat) {
      this.marker = new AMap.Marker({
        position: [lng, lat],
        draggable: true
      })
      this.map.add(this.marker)
    },
    searchAddress() {
      let self = this
      AMap.plugin(['AMap.Autocomplete'], function() {
        let autoOptions = {
          city: '北京'
        }
        let autocomplete = new AMap.Autocomplete(autoOptions)
        autocomplete.search(self.address, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            let lnglat = result.tips[0].location
            self.addMarker(lnglat.lng, lnglat.lat)
            self.map.setCenter([lnglat.lng, lnglat.lat])
          }
        })
      })
    },
    location() {
      let self = this
      AMap.plugin('AMap.Geolocation', function() {
        let geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：无穷大
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          buttonPosition: 'RB' // 定位按钮停靠位置，默认：'LB'，左下角
        })
        geolocation.getCurrentPosition(function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            let lnglat = result.position
            self.addMarker(lnglat.lng, lnglat.lat)
            self.map.setCenter([lnglat.lng, lnglat.lat])
          }
        })
      })
    },
    dragMarker() {
      this.dragMarker = true
      AMap.event.addListener(this.marker, 'dragend', function(e) {
        console.log(e.lnglat.getLng(), e.lnglat.getLat())
      })
    }
  }
}

在上面的代码中，我们使用了高德地图提供的JavaScript API来实现地址搜索、标记添加、定位和拖拽选址的功能。

我们首先创建了一个地图对象，并将其添加到页面中。然后，我们添加了一个标记到地图上，并将其定位到指定的位置。接下来，我们实现了地址搜索功能，允许用户输入地址来搜索并添加标记到地图上。此外，我们还实现了定位功能，允许用户定位到当前的位置并添加标记。最后，我们实现了拖拽选址功能，允许用户拖拽标记来选择地址。

通过使用Vue.js和高德地图，我们可以轻松地在网站上实现地址搜索、标记添加、定位和拖拽选址的功能，提升用户体验，让网站更具实用性和交互性。