uniapp 点击按钮打开地图，显示当前定位 和 指定标点

效果如图 ，  左边是我指定的标点位置， 右边是我自己的定位位置

研究了一整天，终于搞出来了， 刚开始以为要用第三方插件，一直在试高德，腾讯这些， 都没搞好，结果发现根本不用第三方 。。。 很简单的

上代码。  

直接复制粘贴，就是我上图的效果

 1 ， iconPath 是标注点图标 ，要改成自己目录下的图片 ，默认的图标很丑，我自己改了

2 ， 自定义标记点 ， 我这里是写死的经纬度，实际开发可以发请求用接口返回的经纬度 

3 ，markers 就是标记点数组， id是唯一标识

4 ， :scale 是地图的缩放比例，自己去调，看怎么样最好

<template>
	<view>
		<map
			class="map"
			:longitude="longitude"
			:latitude="latitude"
			:show-location="true"
			:markers="markers"
			:scale="16"
            style="width: 100%; height: 450px;"
			
		></map>
	</view>
</template>


<script>
export default {
	data() {
		return {
			// 用户当前定位信息
			latitude:"",
			longitude:"",
			// 自定义标记点
			markers: [{
				id: 2,
				latitude: '23.124088',
				longitude: '113.369389',
				iconPath:'../../static/phone.jpg',
				width: 30,
				height: 30,
			}]
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		// 初始化
		init() {
			let that = this
			// 拿到用户所在位置信息
			uni.getLocation({
				type: 'gcj02',
				success:(res)=> {
					
						this.latitude=res.latitude,
						this.longitude=res.longitude,
					that.markers.push({
						id:1,
						latitude:this.latitude,
						longitude:this.longitude,
						iconPath:'../../static/location.jpg',
						width: 30,
						height: 30,
					})
				}
				
			
			})
		}

	}
}

</script>

<style scoped>
map{
	width: 100%;
	height:600px
}
</style>