uniapp移动端地图，点击气泡弹窗并实现精准定位

记录移动端地图map组件的使用

需求记录：

移动端地图部分需要展示两个定位点，上报点及人员定位点。通过右上角的两个按钮实现地图定位。点击对应定位气泡，弹出定位点的信息。

效果图如下：

map在nvue中的使用。直接用nvue可以直接调整层级,可以覆盖住map组件。在map组件上添加按钮控制，实现交互。map组件内添加按钮使用cover-image如下：

javascript 复制代码

<view>
    <map id="map" class="map" :scale="15" ref="map" style="width:320px;height:500px;margin-left: 30px;"
			:latitude="latitude" :longitude="longitude" :markers="cover">
	    <view class="btnStyle">
		    <cover-image src="../../static/images/people.png" 
			class="removeToReal" @tap="removeToReal"></cover-image>
		    <cover-image src="../../static/images/gaodeMap.png" style="margin-top: 18px;" class="removeToMap" @tap="removeToMap"></cover-image>
	    </view>
	</map>
</view>

js部分：

javascript 复制代码

<script>
    export default {
        data() {
            return {
                // 地图
                mapContext: null,
				latitude: null,
				longitude: null,
                latitudeReal: null,
				longitudeReal: null,
                cover: [],
            }
        },
        methods: {
            //  移动到对应点坐标
            removeToReal() {
				this.mapContext.moveToLocation({
					latitude: this.latitudeReal,
					longitude: this.longitudeReal
				});
			},
            //  移动到对应点坐标
			removeToMap() {
				this.mapContext.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude
				});
			},
            // 关键代码：
            // 加载坐标点及气泡。（data参数中包含了所需的所有数据，以下仅为气泡弹窗的代码示例参考）
			async setMarkers(data) {
				let latlng = JSON.parse(data.inspectorLocation)
				let reallatlngTurn = this.wgs84_gcj02(latlng[0],latlng[1])
				let realatlng = JSON.parse(data.inspectorRealsite)
				let realTurn = this.wgs84_gcj02(realatlng[0],realatlng[1])
				this.longitude = reallatlngTurn[0]
				this.latitude = reallatlngTurn[1]
				this.longitudeReal = realTurn[0]
				this.latitudeReal = realTurn[1]
				let markers = []
				let markerInspector = {
					id: 'id_' + 'inspectorLocation',
					latitude: reallatlngTurn[1],
					longitude: reallatlngTurn[0],
					width: 30,
					height: 35,
					iconPath: '../../static/images/position2.png',
					callout:{//自定义标记点上方的气泡窗口 点击有效  
					    content: `                     上报点
			任务单号：${data.taskSn}
			任务类型：外部任务
			派发时间：${data.dispatchTime.slice(0,10)}
			上报人：    ${data.inspectorName}
			经度：       ${latlng[0].toFixed(6)}
			纬度：       ${latlng[1].toFixed(6)}`,//文本
					    color: '#ffffff',//文字颜色
					    fontSize: 14,//文本大小
					    borderRadius: 15,//边框圆角
					    borderWidth: '10',
						padding: '10',
						textAlign: 'left',
					    bgColor: '#e51860',//背景颜色
					    display: 'BYCLICK',//常显
					}
				}
				markers.push(markerInspector)
				
				let markerReal = {
					id: 'id_' + 'realLocation',
					latitude: realTurn[1],
					longitude: realTurn[0],
					callout:{//自定义标记点上方的气泡窗口 点击有效
					    content: `                     定位点
			任务单号：${data.taskSn}
			任务类型：外部任务
			上报人：    ${data.inspectorName}
			角色：       ${people}
			派发时间：${data.dispatchTime.slice(0,10)}
			经度：       ${realatlng[0]}
			纬度：       ${realatlng[1]}`,//文本
					    color: '#ffffff',//文字颜色
					    fontSize: 14,//文本大小
					    borderRadius: 15,//边框圆角
					    borderWidth: '10',
						padding: '10',
						textAlign: 'left',
					    bgColor: '#e51860',//背景颜色
					    display: 'BYCLICK',//常显
					}
                }
				markers.push(markerReal)
				this.cover=markers

        },
        onLoad(options) {
			this.mapContext = uni.createMapContext("map", this);
        }
</scritpt>