Vue项目接入高德地图

说明：最近开发中有需要使用英文版本的地图，比较下采用了高德地图（百度不支持英文JS API，谷歌需要visa信用卡认证），记录一下开发过程。

1. 申请密钥，地址：高德地图开放平台
2. 在index.html中引入对应文件

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">


<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "安全密钥",
  }
</script>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=密钥KEY&plugin=AMap.Autocomplete"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>

3. 组件开发

• 组件一：用于标记位置和查找地点

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

<script>
export default {
  props: {
    center: {
      type: Object,
      default: () => ({ lng: 0, lat: 0 }) 
    },
    zoom: {
      type: Number,
      default: 13
    }
  },
  data() {
    return {
      selectedLang: this.$i18n.locale === 'en' ? 'en' : 'zh_cn',
      map: null,
      marker: null,
      currentCenter: { lng: this.center.lng, lat: this.center.lat }, // 当前中心点
      searchMarkers: []  // 查找标记点
    };
  },
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      this.initializeMap(this.currentCenter);

      // 地图点击事件
      AMap.event.addListener(this.map, 'click', (e) => {
        this.currentCenter = { lng: e.lnglat.getLng(), lat: e.lnglat.getLat() }; 
        this.addMarker(this.currentCenter); 
        this.$emit('updateCenter', this.currentCenter); 
      });

      // 语言切换
      this.$watch('selectedLang', (newLang) => {
        this.map.setLang(newLang);
      });

      // 地图缩放事件，告诉父组件当前层级
      AMap.event.addListener(this.map, 'zoomend', () => {
        const currentZoom = this.map.getZoom();
        this.$emit('curMapLevel', currentZoom); 
      });
    },
    
    // 初始化地图
    initializeMap(center) {
      if(center.lng == null || center.lat == null){
        this.map = new AMap.Map('container', {
          resizeEnable: true,
          lang: this.selectedLang,
          zoom: this.zoom
        });
      }else{
        this.map = new AMap.Map('container', {
          resizeEnable: true,
          center: [center.lng, center.lat],
          lang: this.selectedLang,
          zoom: this.zoom
        });
        this.addMarker(center);
      }
    },
    // 搜索关键词
    searchKeywords(keywords) {
      AMap.plugin('AMap.Autocomplete', () => {
        var autoOptions = {
          city: '全球',
          lang: this.selectedLang
        }
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(keywords, (status, result) => {
          console.log(result);
          if (status === 'complete' && result.info === 'OK') {
              this.addSearchMarkers(result.tips); 
          } else {
              console.error('自动完成失败:', result.info);
          }
        });
      });
    },
    addMarker(position) {
      if (this.marker) {
        this.marker.setMap(null); 
      }
      this.marker = new AMap.Marker({
        position: [position.lng, position.lat]
      });
      this.marker.setMap(this.map);
    },
    // 添加搜索标记点
    addSearchMarkers(tips) {
      this.searchMarkers.forEach(marker => marker.setMap(null));
      this.searchMarkers = [];

      if (tips.length > 0) {
        this.map.setCenter([tips[0].location.lng, tips[0].location.lat]);
        
        const firstTip = tips[0];
        const firstMarkerPosition = [firstTip.location.lng, firstTip.location.lat];
        const infoWindow = new AMap.InfoWindow({
          content: `<div><strong>${firstTip.name}</strong> <span style="color: #3d6dcc; cursor: pointer;" onclick="window.open('https://www.amap.com/detail/${firstTip.id}')">` + this.$t('common.detail') +`»</span><br>${firstTip.address}</div>`,
          offset: new AMap.Pixel(0, -30) 
        });
        infoWindow.open(this.map, firstMarkerPosition); 
      }
      // 添加搜索标记点
      tips.forEach(tip => {
        const marker = new AMap.Marker({
          position: [tip.location.lng, tip.location.lat],
          icon: new AMap.Icon({
            size: new AMap.Size(25, 34), 
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
            imageSize: new AMap.Size(25, 34), 
          })
        });
        marker.setMap(this.map);
        this.searchMarkers.push(marker); 

        // 点击事件，显示详情
        marker.on('click', () => {
          const infoWindow = new AMap.InfoWindow({
            content: `<div><strong>${tip.name}</strong> <span style="color: #3d6dcc; cursor: pointer;" onclick="window.open('https://www.amap.com/detail/${tip.id}')">` + this.$t('common.detail') +`»</span><br>${tip.address}</div>`, // Display name and detail button in the same line
            offset: new AMap.Pixel(0, -30) 
          });
          infoWindow.open(this.map, marker.getPosition()); 
          this.currentCenter = { lng: tip.location.lng, lat: tip.location.lat };
          this.$emit('updateCenter', this.currentCenter);
        });
      });
    },
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  height: calc(100vh - 200px);
  margin: 0px;
}
</style>
- 组件二：用户显示多个标记点位置及标记点详情