vue+高德地图实现地图搜索及点击定位操作

在vue项目中，我们可以使用高德地图API实现地图搜索及点击定位操作。本文将提供一个完整的攻略，包括如何使用高德地图API、如何实现地图搜索及点击定位操作、如何使用示例代码内容。

使用高德地图API

在vue项目中，我们可以使用高德地图API实现地图搜索及点击定位操作。以下是一个示例说明，演示如何使用高德地图API：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    const map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
  }
}
</script>

在上面的代码中，我们使用高德地图API创建了一个地图，并设置了地图的缩放级别和中心点坐标。

实现地图搜索及点击定位操作

在vue项目中，我们可以使用高德地图API实现地图搜索及点击定位操作。以下是一个示例说明，演示如何实现地图搜索及点击定位操作：

<template>
  <div>
    <input type="text" v-model="keyword" @keyup.enter="search" />
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      map: null,
      marker: null
    }
  },
  mounted() {
    this.map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
    this.map.on('click', this.handleMapClick);
  },
  methods: {
    search() {
      AMap.plugin('AMap.PlaceSearch', () => {
        const placeSearch = new AMap.PlaceSearch({
          pageSize: 5,
          pageIndex: 1,
          city: '北京市'
        });
        placeSearch.search(this.keyword, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const poi = result.poiList.pois[0];
            const location = poi.location.split(',');
            this.map.setCenter(location);
            this.marker = new AMap.Marker({
              position: location
            });
            this.marker.setMap(this.map);
          }
        });
      });
    },
    handleMapClick(e) {
      const location = [e.lnglat.getLng(), e.lnglat.getLat()];
      if (this.marker) {
        this.marker.setPosition(location);
      } else {
        this.marker = new AMap.Marker({
          position: location
        });
        this.marker.setMap(this.map);
      }
    }
  }
}
</script>

在上面的代码中，我们实现了地图搜索及点击定位操作。我们使用了一个文本框和一个地图，当用户在文本框中输入关键字并按下回车键时，我们使用高德地图API进行搜索，并在地图上显示搜索结果。当用户在地图上点击时，我们在点击位置上添加一个标记。

示例

以下是两个示例说明，演示如何在vue项目中使用高德地图API实现地图搜索及点击定位操作：

示例1：实现地图搜索

在vue项目中，我们可以使用高德地图API实现地图搜索。以下是一个示例说明，演示如何实现地图搜索：

<template>
  <div>
    <input type="text" v-model="keyword" @keyup.enter="search" />
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      map: null
    }
  },
  mounted() {
    this.map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
  },
  methods: {
    search() {
      AMap.plugin('AMap.PlaceSearch', () => {
        const placeSearch = new AMap.PlaceSearch({
          pageSize: 5,
          pageIndex: 1,
          city: '北京市'
        });
        placeSearch.search(this.keyword, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const poi = result.poiList.pois[0];
            const location = poi.location.split(',');
            this.map.setCenter(location);
          }
        });
      });
    }
  }
}
</script>

在上面的代码中，我们实现了地图搜索。我们使用了一个文本框和一个地图，当用户在文本框中输入关键字并按下回车键时，我们使用高德地图API进行搜索，并在地图上显示搜索结果。

示例2：实现点击定位

在vue项目中，我们可以使用高德地图API实现点击定位。以下是一个示例说明，演示如何实现点击定位：

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      marker: null
    }
  },
  mounted() {
    this.map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
    this.map.on('click', this.handleMapClick);
  },
  methods: {
    handleMapClick(e) {
      const location = [e.lnglat.getLng(), e.lnglat.getLat()];
      if (this.marker) {
        this.marker.setPosition(location);
      } else {
        this.marker = new AMap.Marker({
          position: location
        });
        this.marker.setMap(this.map);
      }
    }
  }
}
</script>

在上面的代码中，我们实现了点击定位。我们使用了一个地图，当用户在地图上点击时，我们在点击位置上添加一个标记。