uniapp map标签

czxlll

已于 2022-11-09 16:53:36 修改

阅读量421

点赞数

文章标签： javascript 前端 vue.js

于 2022-11-08 16:47:26 首次发布

本文链接：https://blog.csdn.net/czx1314ails/article/details/127745914

版权

uniapp map标签

uniapp 地图，点击获取经纬度并在点击地添加小图标做标记

html代码

<template>
	<view>
		<map id="map1" ref="map1" class="ci-map-all" :style="{height:'calc(100vh - 100px)',width:'100%'}" :scale="myScale" :latitude="location.latitude" :longitude="location.longitude" :markers="covers" >
		</map>
	<view>
</template>

js代码

<script>
	export default {
		data() {
			return {
				myScale: 16,
				myScaleFloor: 16,
				location: {
					longitude: 116.3974770000, //初始经度
					latitude: 39.9086920000,//初始纬度
				},
				covers: [],//标记点数组
				markerId:0,
			}
		},
		onReady() {
			//页面初次渲染就加载监听地图点击事件
			this.addMapEvent()
		},
		methods: {
			addMapEvent() {
				let that = this;
				var maps = uni.createMapContext("map1", this).$getAppMap();
				maps.onclick = function(point) {
					that.covers = [];//每次只需要一个锚点
					var dst = new plus.maps.Point(point.longitude, point.latitude);
					plus.maps.Map.reverseGeocode(dst, {}, function(event) {
						that.address = event.address;
						that.covers = [{
							id:0,
							width:100,
							height:100,
							longitude:point.longitude,
							latitude:point.latitude,
							iconPath:'/static/imgs/adressIcon.png'
						}]
					});
				}
			},
		}
	}