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 lineoffset: 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>
- 组件二：用户显示多个标记点位置及标记点详情