页面元素:
<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) return
this.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.latitude
this.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 = southwest
this.QueryDeviceList.input.value.northeast = northeast
resolve()
}
})
})
},
//设置视野
setRegion (res) {
let southwest = [res.southwest.latitude, res.southwest.longitude]
let northeast = [res.northeast.latitude, res.northeast.longitude]
this.QueryDeviceList.input.value.southwest = southwest
this.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 = index
i.width = 80
i.height = 80
i.deviceLabel = deviceLabel
i.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)
// 设置选中状态的markerId
this.methods('setMarkerNoSelected')
this.methods('setOldMarker', -1)
this.methods('setCovers', list)
}
}
},
//点击标记点
markertap(data) {
console.log(data)
let markerId = data.detail.markerId
if (this.map.oldMarker === markerId) return
// 显示标记详情
this.methods('setDeviceShow', true) //是否显示详情弹框
this.methods('setDeviceData', markerId) //显示的数据
// 把上一次选中状态变成未选中
this.methods('setMarkerNoSelected')
// 图标改成选中状态
this.methods('setMarkerSelected', markerId)
// 设置选中状态的markerId
this.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()”