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>
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918414 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview