uniapp开发微信小程序使用高德地图

uniapp  官方文档 地图组件控制  地图组件

高德地图key需要公司去申请,之后自己在下载高德地图微信小程序插件

下好的js文件放在项目中,之后在vue项目中的main.js文件中全局注入

//地图挂载
var amapFile = require('@/utils/amap-wx.130.js');
Vue.prototype.myAmapFun = new amapFile.AMapWX({
	key: '高德地图的key'
});

页面引入并使用文章来源地址https://www.toymoban.com/news/detail-609916.html

<template>
	<view class="map-page">
		<map id="map" class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
			@regionchange="regionchange"></map>
		<cover-view class="btn-box">
			<cover-view class="btn" @click="submit">确认并保存</cover-view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 30.659462,
				longitude: 104.065735,
				covers: [], //存放标记点数组
			}
		},
		onLoad() {
			this.getLocation();
			this.setCovers(this.latitude, this.longitude)

		},
		methods: {
			//获取经纬度
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let {
							latitude,
							longitude
						} = res;
						that.latitude = latitude;
						that.longitude = longitude;
						that.setCovers(latitude, longitude)
					},

				})
			},
			//地图视野发生变化
			regionchange(e) {
				if (e.type === 'end') {
					let {
						latitude,
						longitude
					} = e.detail.centerLocation;
					this.setCovers(latitude, longitude);
				} else if (e.type == 'regionchange') {
					let self = this
					this.mapContext = uni.createMapContext("map", this);
					this.mapContext.getCenterLocation({
						type: 'gcj02',
						success: (res) => {
							let {
								latitude,
								longitude
							} = res;
							this.setCovers(latitude, longitude);
						},
						fail: (err) => {
							// console.log('获取当前地图中心的经纬度2', err);
						}
					})
				}
			},
			//设置点位
			setCovers(latitude, longitude) {
				let location = {
					id: "0",
					latitude: Number(latitude),
					longitude: Number(longitude),
					width: uni.upx2px(20),
					height: uni.upx2px(20),
					iconPath: './../../static/location.png'
				}
				this.covers = [location]
			},
			//提交
			submit() {
				let that = this
				uni.showLoading({
					title: '提交中'
				});
				that.myAmapFun.getRegeo({
					location: `${this.longitude},${this.latitude}`,
					success: function(res) {
						uni.hideLoading();
						if(res.length > 0) {
						  uni.$emit('changeAddress', res[0]);
						  uni.navigateBack({
						    delta: 1
						  });
						} else {
						  uni.$u.toast('地址解析失败');
						}
					},
					fail: function(res) {
						uni.hideLoading();
						uni.$u.toast('地址解析失败');
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.map-page {
		height: 100%;

		.map {
			width: 100%;
			height: 100%;
		}

		.btn-box {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 15rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 15rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 15rpx);

			.btn {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 32rpx;
				background-color: #ff6735;
				color: #fff;
			}
		}
	}
</style>

到了这里，关于uniapp开发微信小程序使用高德地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！