高德地图-微信小程序

最新推荐文章于 2025-04-17 08:34:53 发布

前端程序媛 ^O^

最新推荐文章于 2025-04-17 08:34:53 发布

阅读量1.9k

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_46032200/article/details/120908912

版权

本文详细介绍了如何申请高德地图API key，配置工程并展示了关键操作，如定位、地图缩放、marker管理和点击事件。通过实例演示了如何在Vue项目中集成AMAP-WX.js，实现地图功能和商店位置显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、申请高德地图key

点我查看获取key的步骤

2、配置工程

点我去查看配置工程的步骤

3、使用

1、在使用地图的页面引入amap-wx.js文件

import amapFile from '../../libs/amap-wx.130.js'

2、简单引入

<template>
	<map class="map" id="map" :longitude="longitude" :latitude="latitude" :scale="scale" show-location="true" @markertap="markertap($event)" :markers="markers" ></map>
</template>
<script>
	export default {
		data(){
			return {
				markers:[],
				chooseLocation:'',
				scale:15,
				map:'',
			}
		},
		onReady() {
			this.map = new amapFile.AMapWX({key:'818dc464b70cfe7c506489643c84a4b5'}); //申请的key
		}
	}
</script>

3、api的使用

1、定位

this.map.getRegeo({
	success:(res)=>{
		console.log(res)
	},
	fail:(err)=>{
		console.log(err)
	}
})

2、将指定位置移动到屏幕中心

<map class="map" id="map" :longitude="longitude" :latitude="latitude" ></map>
//只需改变绑定的longitude与latitude的值即可
this.latitude = 37.365244
this.longitude = 112.365244

3、添加marker / 修改marker

<map class="map" id="map" :markers="markers" ></map>
//只要将marker添加在绑定的marker的数组中就可以了
//修改marker，只要修改markers中对应的数据就可以
addMarkers() {
	let _markers = []
	this.storesList.forEach((v,i)=>{
		if( v.addrLatitude<90){
			const marker = {
				id: v.id,
				iconPath: '../../static/nearbyStores/current_img.png',
				width: 20,
				height: 34,
				latitude:v.addrLatitude,
				longitude:v.addrLongitude
			 };
			_markers.push(marker)
		}
	})
	this.markers = _markers
},

4、点击marker

<map class="map" id="map" @markertap="markertap($event)" ></map>

// 点击marker，绑定@markertap
markertap(e){
	this.storesList.forEach((v,i)=>{
		if(e.detail.markerId == v.id){
			//跳转到高德app或者腾讯app
			uni.openLocation({
				latitude: v.addrLatitude,
				longitude: v.addrLongitude,
				name: v.name,
				address: v.addressLocation,
				success: function (res) {
					console.log("跳转高德appsuccess",res);
				},
				fail: (err) => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:3000
					})
				}
			}); 
		
		}
	})
	
},

5、地图的放大与缩小

<map class="map" id="map" :scale="scale" ></map>

//只需改变scale的大小即可
this.scale = 18

6、计算两地之间的距离（如果官方没有提供相应的api，可以使用这个）

// 计算指定地点与各个门店的距离
distance(longitude,latitude) {  
	this.storesList.forEach(v=>{
		let PI = 3.14159265358979323;//圆周率
		let R = 6371229;//地球半径
		// 指定位置
		var lon1 = longitude;
		var lat1 = latitude;
		// 某个门店的位置
		var lon2 = v.addrLongitude;
		var lat2 = v.addrLatitude;
		let x,y,distance;
		let lonres = lon1 > lon2?lon1-lon2:lon2-lon1;
		let latres = lat1 > lat2?lat1-lat2:lat2-lat1;
		x = (lonres) * PI * R * Math.cos(((lat1 + lat2) / 2) * PI / 180) / 180;
		y = (lat2 - lat1) * PI * R / 180;
		distance = Math.hypot(x, y);
		this.$set(v,'distanceNum',distance)
	})
	this.storesList = this.storesList.sort(function (e, f) {
		return e.distanceNum - f.distanceNum
	})
	this.storesList.forEach(v=>{
		let disCH = ''
		if(v.distanceNum > 0){
			if(v.distanceNum>1000){
				disCH = (v.distanceNum/1000).toFixed(1)+'km'
			}else{
				disCH = v.distanceNum.toFixed(1)+'m'
			}
		}else{
			disCH = '未知'
		}
		this.$set(v,'disCH',disCH)
	})
},