vue引入高德地图实现关键字搜索和电子围栏

<template>
  <div id="app">
    <div id="container"></div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 高德地图实例化
      let map = new AMap.Map('container', {
        zoom: 11, // 缩放级别
        center: [116.397428, 39.90923] // 中心点坐标
      });
 
      // 构造搜索类
      let placeSearch = new AMap.PlaceSearch({
        map: map,
        pageSize: 5,
        pageIndex: 1
      });
 
      // 关键词输入建议
      AMap.event.addListener(placeSearch, 'markersset', (e) => {
        let keywords = e.poiList.map((poi) => {
          return poi.name;
        });
        // 假设存在autoCompletePlugin插件
        map.autoCompletePlugin.setCity('北京');
        map.autoCompletePlugin.search(keywords);
      });
 
      // 创建一个圆形围栏
      let circle = new AMap.Circle({
        map: map,
        center: map.getCenter(),
        radius: 1000,
        strokeColor: 'blue',
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: 'blue',
        fillOpacity: 0.1
      });
 
      // 地图点击事件，更新电子围栏中心点
      map.on('click', (e) => {
        circle.setCenter(e.lnglat);
      });
 
      // 使用地理编码进行逆地理编码
      AMap.event.addListener(map, 'click', (e) => {
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        });
        geocoder.getAddress(e.lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            // 输出地址信息
            console.log(result.regeocode.formattedAddress);
          }
        });
      });
    }
  }
};
</script>
 
<style>
#container {
  width: 100%;
  height: 800px;
}
</style>

这段代码展示了如何在Vue应用中初始化高德地图，实现关键词搜索提示，创建电子围栏，并在地图上点击时更新围栏位置和获取点击位置的详细地址信息。