公司用的是百度地图，过听同事说，市场上用高德地图的比较多，于是又按捺不住自己那 好奇万物的心，专门出研究了一下高德地图，发现内容基本一直，不过就是在方法的名字变了而已，废话不多说我们开始研究

高德地图api官网

一、小试牛刀

 1、首先我们要把申请一个高德地图的key，然后就是把高德地图局部引入

在utils文件下建立一个map用来放置我们的地图

<template>
	<view class="map">
		<view id="amap" class="amap"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 30.218143, // 纬度
				longitude: 120.280798, // 经度
			};
		},

	};
</script>
<script module="ModuleInstance" lang="renderjs">
	//renderjs运行在视图层的js，只支持app-vue和h5（简单来说就是开了另外一条线程）
	//大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）
	export default {
		data() {
			return {
				map: null,
				layer: null,
				parkList: [],
				markerId: ''
			};
		},
		mounted() {
			if (window.AMap) {
				//todo 如果能访问到AMap直接初始化
				this.initAmap();
			} else {
				//todo 动态引入
				const script = document.createElement('script');
				script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key";;
				script.onload = () => {
					//todo 初始化地图
					this.initAmap();
				}
				document.head.appendChild(script);
			}
		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('amap', {
					zoom: 10, //显示的缩放级别
					// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					center: [108.954239, 34.265472], //todo 中心点坐标
					mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782', //todo 地图样式
					resizeEnable: true   //是否监控地图容器尺寸变化
				});
			}
		},
	};
</script>
<style lang="scss">
    	page{
		width: 100%;
		height: 80%;
	}
	.map {
		width: 100%;
		height: 100%;
	}

	#amap {
		width: 100%;
		height: 100%;
	}
</style>

效果图：

2、获取当前经纬度并标注到地图上

<script module="ModuleInstance" lang="renderjs">
	//renderjs运行在视图层的js，只支持app-vue和h5（简单来说就是开了另外一条线程）
	//大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）
	export default {
		data() {
			return {
				map: null,
				layer: null,
				parkList: [],
				markerId: ''
			};
		},
		mounted() {
			if (window.AMap) {
				//todo 如果能访问到AMap直接初始化
				this.initAmap();
			} else {
				//todo 动态引入
				const script = document.createElement('script');
				script.src = "https://webapi.amap.com/maps?v=1.4.15&key=你的key";;
				script.onload = () => {
					//todo 初始化地图
					this.initAmap();
				}
				document.head.appendChild(script);
			}
		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('amap', {
					zoom: 10, //显示的缩放级别
					// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					center: [108.954239, 34.265472], //todo 中心点坐标
					mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782', //todo 地图样式
					resizeEnable: true
				});
				// var marker = new AMap.Marker({
				// 	position: new AMap.LngLat(108.954239, 34.265472),
				// 	// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				// });
				// this.map.add(marker);
				//todo 地图创建完成 标注点
				this.map.on("complete", () => {

					this.createLabelsLayer();
				});
			},
			createLabelsLayer() {
				if (!this.map) return;
				let that = this;
				AMap.plugin('AMap.Geolocation', function() { //AMap.Geolocation插件来实现定位
					var geolocation = new AMap.Geolocation({
						// type: 'wgs84',
						// 是否使用高精度定位，默认：true
						enableHighAccuracy: true,
						// 设置定位超时时间，默认：无穷大
						timeout: 10000,
						// 定位按钮的停靠位置的偏移量
						offset: [10, 20],
						//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
						zoomToAccuracy: true,
						//  定位按钮的排放位置,  RB表示右下
						position: 'RB'
					})

					geolocation.getCurrentPosition(function(status, result) {

						if (status == 'complete') {
							onComplete(result)
						} else {
							onError(result)
						}
					});

					function onComplete(data) {
						// data是具体的定位信息
						let marker = new AMap.Marker({
							position: new AMap.LngLat(data.position.lng, data.position.lat),
							// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
						});
						that.map.setCenter(new AMap.LngLat(data.position.lng, data.position.lat));
						that.map.setZoom(18);
						that.map.add(marker);
					}

					function onError(data) {
						console.log("定位出错");
					}
				})
			}
		},
	};
</script>

效果图

这里注意了，在pc中有可能会没展示出来，但是用真机测试时，是没有任何问题的，并且会出现如图所示内容，不过有个小问题是，经纬度出现误差，目前尚未解决，后面找到方法我会写在该文章的下面

尚未完结，敬请期待