uniapp-map基本使用

页面元素：

 <map style="width: 100%; height: 100%" id="map1" ref="map1" :show-location="true":latitude="map.latitude" :longitude="map.longitude" :scale="map.scale" :markers="map.covers"@markertap="markertap"@regionchange="regionchange" @updated="mapUpdated">
</map>

js:

data(){return{map: {title: 'map',latitude: 22.862277018229168,longitude: 108.27395046657986,scale:10.5,covers: [],updated: false,oldMarker: undefined},QueryDeviceList: {input: {value: {"organizationId": undefined,      // id"searchKey": undefined,           // 关键字搜索"southwest": [],"northeast": []}},output: {value: [],currentDataShow: false,currentData: {},organizationName: undefined}}}
}
created(){//uniapp获取经纬度uni.getLocation({type: 'gcj02', success: (res) => {console.log(res)this.setLocation(res)  //获取经纬度之后可以进行转换  然后据此搜索一波数据this.getRegion()  //获取视野}})
},
mounted(){//刚进页面设置一波显示的东西this.methods('setDeviceShow', false)this.methods('QueryDeviceListReset')//this.methods('setLocation', {latitude:this.map.longitude:this.map.longitude})await this.methods('getRegion')this.methods('setMoveToLocation')  //移动let data = await this.methods('queryFaultList',true)if (data) {this.methods('setCovers', data)}}
},
methods:{//地图加载完毕的事件async mapUpdated () {if (this.map.updated) returnthis.methods('setUpdated')this.methods('setMapContext')this.methods('setMoveToLocation')await this.methods('getRegion')console.log('queryFaultList------------------')let data = await this.methods('queryFaultList')console.log(data)if (data) {this.methods('setCovers', data)}},setUpdated(){this.map.updated = true},//算是绑定对象吧setMapContext () {this.mapContext = uni.createMapContext('map1')console.log(this.mapContext)}，//设置中心点setLocation (data) {this.map.latitude = data.latitudethis.map.longitude = data.longitude},//获取视野getRegion(){await new Promise(resolve => {this.mapContext.getRegion({success: (res) => {let southwest = [res.southwest.latitude, res.southwest.longitude]let northeast = [res.northeast.latitude, res.northeast.longitude]this.QueryDeviceList.input.value.southwest = southwestthis.QueryDeviceList.input.value.northeast = northeastresolve()}})})},//设置视野setRegion (res) {let southwest = [res.southwest.latitude, res.southwest.longitude]let northeast = [res.northeast.latitude, res.northeast.longitude]this.QueryDeviceList.input.value.southwest = southwestthis.QueryDeviceList.input.value.northeast = northeast},//移动setMoveToLocation () {this.mapContext.moveToLocation({latitude: this.map.latitude,longitude: this.map.longitude})},//根据请求的数据设置标记点的位置以及图标setCovers (data) {data.forEach((i, index) => {i.id = indexi.width = 80i.height = 80i.deviceLabel = deviceLabeli.iconPath = '../../static/img/ddd.png'}})this.map.covers = data},//拖动视野async regionchange(data) {// if (data.detail.type === 'end' && data.detail.causedBy === "drag") {if (data.type === 'end' && data.causedBy === "drag") {console.log('地图视图改变')this.methods('setRegion', data.detail.region)//请求数据let list = await this.methods('queryFaultList')if (list) {this.methods('setDeviceShow', false)// 设置选中状态的markerIdthis.methods('setMarkerNoSelected')this.methods('setOldMarker', -1)this.methods('setCovers', list)}}},//点击标记点markertap(data) {console.log(data)let markerId = data.detail.markerIdif (this.map.oldMarker === markerId) return// 显示标记详情this.methods('setDeviceShow', true)   //是否显示详情弹框this.methods('setDeviceData', markerId)  //显示的数据// 把上一次选中状态变成未选中this.methods('setMarkerNoSelected')// 图标改成选中状态this.methods('setMarkerSelected', markerId)// 设置选中状态的markerIdthis.methods('setOldMarker', markerId)},// 把图标上一次选中状态变成选中setMarkerSelected (markerId) {let markers = this.map.covers[markerId]if (markers && markers.iconPath) {let iconPath = markers.iconPath.split('.png')markers.iconPath = iconPath[0] + '_selected.png'}}// 把图标上一次选中状态变成未选中setMarkerNoSelected () {if (this.map.oldMarker || this.map.oldMarker === 0) {let oldMarker = this.map.covers[this.map.oldMarker]if (oldMarker && oldMarker.iconPath) {oldMarker.iconPath = oldMarker.iconPath.replace('_selected', '')}}}
}

提示：示例代码摘取自公司项目，因使用了框架。复制代码需要手动修改一些地方。正常是调用不了这个this.methods()的。
例如：把“this.methods(‘getData’)”，改成“this.getData()”

uniapp-map基本使用相关推荐

uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染（微信小程序）
使用uni-app中 map组件实现路线轨迹回放功能. 1.通过接口获取返回的轨迹点. 2.地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差.点经纬度转换,wgs84togcj02 =>j ...
uniapp - Map地图组件属性示例
目录 1.markers :点标记,用于在地图上显示标记的位置. 2.点聚合: 3.polygons : 4.include-points:可以实现自动缩放展示视图内所有的点标记. 5.polylin ...
解决uniapp map遮盖遮罩层
uniapp 层级高 app运行时遮罩层显示的时候 map在遮罩层上方 1.在需要弹出框的页面中配置pages.json {"path": "pages/con-te ...
uniapp map 地图
## 简单实现两点连线文档地址: uni-app官网 ## 代码 <template><view><map style="width: 100%;height ...
uniapp map 点聚合聚合点样式修改
重点:此代码复制可直接运行, 重要提示需要编译在小程序开发工具中使用"真机预览"才可展示如上图所示效果,一定"真机预览"哟!!! 项目需求聚合点的展示必须是图 ...
uniapp map地图显示图标markers问题，自定义图标不显示
自己记录一下uniapp开发小程序关于map地图问题 <map style="width:750rpx; height:100vh;" scale="17" ...
uni-app——map组件路线[polyline]功能示例
Demo <template><view class="img_box"><map :latitude="latitude" :l ...
uniapp map画多边形打点连线
我是参考https://blog.csdn.net/zyj12138/article/details/112463219这个地址完成的先看结果代码 <mapstyle="width ...
uni-app map 地图
html <template><view class="box"><!-- <view class="inputDevice" ...
uniapp map地图
<template><view class=""><!-- scale Number 16 缩放级别,取值范围为3-20min-scale Numbe ...

uniapp-map基本使用

uniapp-map基本使用相关推荐

最新文章

热门文章