高德地图引入



1 引入插件 amap-wx

链接:https://pan.baidu.com/s/1JxqI4YZ7lZRlHEbhnBGQVg
提取码:zkcc

 

2 创建amap.js 用于统一管理amap对象

var amapFile = require('@/components/amap-wx/lib/amap-wx.js');

var myAmapFun = new amapFile.AMapWX({
	key: '高德地图分配的key值'
})

module.exports = {
	myAmapFun:myAmapFun
}

 

实例:

以下实例 可以实现 初始化地图组件,获取当前位置,通过滑动地图 获取当前中心的坐标和附近的poi

 

<template>
	<view class="details">
		<view class="map">
			<map id="map" class="wamap" :latitude="amap.latitude" :longitude="amap.longitude" show-location="true"
				@regionchange='regionchange'>
				<cover-image class="middle_img" src="../../static/address/location.png"></cover-image>
			</map>
		</view>
	</view>
</template>

<script>
	var amap = require('@/utils/amap.js');
	export default {

		onLoad(option) {
			this.getLocation()
		},
		onReady() {
			this.mapobj = uni.createMapContext('map');
		},
		data() {
			return {
				mapobj: {},
				amap: {
					longitude: '116.37359',
					latitude: '39.92437'
				},
			}
		},
		methods: {
			getLocation() {
				var that = this

				amap.myAmapFun.getRegeo({

					success: function(data) {
						var res = data[0]

						that.amap.longitude = res.longitude
						that.amap.latitude = res.latitude
						that.curr_city = res.regeocodeData.addressComponent.citycode
						that.mapobj.moveToLocation({
							longitude: res.longitude,
							latitude: res.latitude
						})
					},
					fail: function(err) {
						console.log(err)
					}
				})


			},
			regionchange(e) {
				var that = this
				this.mapobj.getCenterLocation({
					success: function(res) {

						that.curr_location = res.longitude + ',' + res.latitude
						that.getPoiAround()
					}
				})
			},
			getPoiAround() {

				var that = this
				amap.myAmapFun.getPoiAround({
					location: that.curr_location,
					success: function(res) {
						that.nears_list = res.poisData
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		height: 100%;
		display: flex;

	}

	.map {
		width: 750rpx;
		height: 456rpx;
		
		.wamap {
			position: relative;
			width: 100%;
			height: 100%;
			.middle_img {
				position: absolute;
				width: 54rpx;
				height: 83rpx;
				left: 348rpx;
				top: 145rpx;
			}
		}
	}
</style>