赞
踩
记录移动端地图map组件的使用
需求记录:
移动端地图部分需要展示两个定位点,上报点及人员定位点。通过右上角的两个按钮实现地图定位。点击对应定位气泡,弹出定位点的信息。
效果图如下:
map在nvue中的使用。直接用nvue可以直接调整层级,可以覆盖住map组件。在map组件上添加按钮控制,实现交互。map组件内添加按钮使用cover-image如下:
- <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部分:
- <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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。