El subprograma de WeChat de uniapp realiza marcas multipunto o de un solo punto en el mapa (@ 莫 成 尘)

Primero mire el código, simplemente cópielo y úselo. Verá los siguientes efectos:

Los derechos de autor pertenecen a Mo Chengchen

Nota: el ícono debe ser descargado y reemplazado por usted mismo. Además, puede haber ocasiones en línea cuando llame a mi clave de mapa local. ¡Utilice y depure no más de 50 veces! Si no hay ningún efecto, tenga en cuenta que el mensaje de error se puede llamar en línea请自行在高德地图申请密钥

<template>
	<view class="box">
		<map name="" :markers="markers"></map>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				addressA:"北京市昌平区", //标记点A 
				addressB:"天津市西青区", //标记点B  其他多点或单点请自行尝试
				list:[],
				markers:[
					{
    
     //标记点A 的信息
						iconPath: "../../static/weizhi.png",  //图标
						id: 0,
						width: 20, //图标icon 宽度
						height: 28 //图标icon 高度
					},
					{
    
    
						iconPath: "../../static/weizhi3.png",
						id: 1,
						width: 20,
						height: 28
					}
				]
			}
		},
		methods: {
    
    
			map() {
    
    
				let _this = this
				var key = "ff309ed17221397704ae790a6dacea43"; //地图密钥  请注意调用次数  或自行在高德地图申请密钥
				var URL =
					"https://restapi.amap.com/v3/geocode/geo?batch=true&address=" +
					_this.addressA + //标记点A
					"|" +
					_this.addressB + //标记点B
					"&key=" +
					key;
				uni.request({
    
    
					url:URL,
					success(res) {
    
    
						_this.list = res.data.geocodes //获取到地图信息
						_this.markers[0].longitude =Number(_this.list[0].location.split(",")[0]) //标记点A经度
						_this.markers[0].latitude = Number(_this.list[0].location.split(",")[1]) //标记点A纬度
						_this.markers[1].longitude = Number(_this.list[1].location.split(",")[0]) //标记点B经度
						_this.markers[1].latitude = Number(_this.list[1].location.split(",")[1]) //标记点B纬度
						console.log(_this.markers[0],_this.markers[1]) //完整的标记信息
					}
				})
			},
			
		},
		onLoad() {
    
    
			let _this = this;
			_this.map() //需要自执行
		}
	}
</script>

<style lang="scss" scoped>
	.box {
    
    
		width: 100%;
		height: 100%;
	}

	map {
    
    
		width: 100%;
		height: 1000rpx;
		color: red;
	}
</style>

Si tienes alguna pregunta sobre uniapp o no entiendes este método, puedes dejar un mensaje, te responderé lo antes posible y te ayudaré a resolverlo.

Supongo que te gusta

Origin blog.csdn.net/weixin_47821281/article/details/113948879
Recomendado
Clasificación