点亮城市之心：Vue中PC端高德地图全攻略

2023-07-13 10:28:17

将高德地图无缝集成到你的Vue项目：实现搜索定位、地址标记和弹窗显示

一、引进高德地图SDK

在项目中引入高德地图SDK是集成地图功能的第一步。前往高德地图官网下载最新版本的SDK，并将其解压到项目目录中。

二、初始化地图实例

有了SDK之后，在Vue组件中，我们可以通过高德地图提供的AMap对象来创建一个地图实例。

import AMap from 'AMap';

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.map = new AMap.Map('mapContainer', {
      center: [116.481499, 39.990475],
      zoom: 12
    });
  }
};

三、实现搜索定位

有了地图实例，我们可以实现搜索定位功能。高德地图提供的Geocoder对象可以将地址转换为经纬度坐标，然后在地图上标记该位置。

import AMap from 'AMap';

export default {
  data() {
    return {
      map: null
    }
  },
  methods: {
    searchLocation(address) {
      AMap.Geocoder().getLocation(address, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          const location = result.geocodes[0].location;
          this.addMarker(location);
        }
      });
    }
  },
  mounted() {
    this.map = new AMap.Map('mapContainer', {
      center: [116.481499, 39.990475],
      zoom: 12
    });
  }
};

四、地址标记

搜索定位完成后，在地图上标记该位置是必不可少的。高德地图提供的Marker对象可以在地图上添加标记。

import AMap from 'AMap';

export default {
  data() {
    return {
      map: null
    }
  },
  methods: {
    addMarker(location) {
      const marker = new AMap.Marker({
        position: location,
        title: '我的标记'
      });
      this.map.add(marker);
    }
  },
  mounted() {
    this.map = new AMap.Map('mapContainer', {
      center: [116.481499, 39.990475],
      zoom: 12
    });
  }
};

五、弹窗显示定位详情

最后，可以在标记上添加点击事件，当用户点击标记时，弹出窗口显示该位置的详细信息。

import AMap from 'AMap';

export default {
  data() {
    return {
      map: null
    }
  },
  methods: {
    addMarker(location) {
      const marker = new AMap.Marker({
        position: location,
        title: '我的标记'
      });
      marker.on('click', () => {
        const infoWindow = new AMap.InfoWindow({
          content: '我是标记'
        });
        infoWindow.open(this.map, location);
      });
      this.map.add(marker);
    }
  },
  mounted() {
    this.map = new AMap.Map('mapContainer', {
      center: [116.481499, 39.990475],
      zoom: 12
    });
  }
};