基于uniapp微信小程序使用高德地图

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

基于uniapp微信小程序使用高德地图

步骤

1. 申请高德小程序的key

2. 引入 amap-wx.js

下载地址：https://a.amap.com/lbs/static/zip/AMapWX_SDK_V1.2.1.zip

3. 在使用到地图页面引入 amap

<template> 
	<map class="map" id="map" :longitude="longitude" :latitude="latitude"
		 scale="16" show-location="true" :markers=markers  bindmarkertap="makertap"></map>
</template>

<script>
	export default {
		data() {
			return {
				amapPlugin: null,
				//高德key，填入步骤1申请的
				key: "xxxxxxxxxxxxx",
				//点坐标
				markers: [
					{
						//可用本地图片替换
						iconPath: "../../static/img/mapicon_navi_s.png",
						id: 0,
						latitude: 39.989643,
						longitude: 116.481028,
						width: 23,
						height: 33
					}, {
						//可用本地图片替换
						iconPath: "../../static/img/mapicon_navi_e.png",
						id: 0,
						latitude: 39.90816,
						longitude: 116.434446,
						width: 24,
						height: 34
					},
				],
				//中心点
				latitude: 39.989643,
				longitude: 116.481028
			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
			key: this.key
			})
			//获取当前位置
			this.amapPlugin.getRegeo({
				//可用本地图片替换
				iconPath: "../../static/img/mapicon_navi_s.png",
				iconWidth: 22,
				iconHeight: 33,
				success: function(data) {
					console.log(data)
				}
			});
		},
		methods: {}
	}
</script>

来源：oschina

链接：https://my.oschina.net/lwenhao/blog/3147732