uniapp 使用renderjs绘制高德地图。
使用高德地图Polygon绘制网格，但是uniapp map组件自带的功能好像并不能满足自己的需要，于是在github上搜索查找了一番，找到了一个合适的组件，记录收藏一下。
组件代码
<template>
<view class="amap-container">
<view :style="'height:'+windowHeight+'px'" :prop="markerList" :change:prop="amap.updateEcharts" id="amap">
</view>
<u-popup :show="show" mode="center">
<view class="popUpWin">
<text class="info">信息查看</text>
<text>东经：{{longitude}}</text>
<text>北纬：{{latitude}}</text>
<text>编号：{{dataIndex.workGridCode}}</text>
<text>地址：{{addressname}}</text>
<div class="buts">
<u-button @click="confirm" size="small" class="ml20 mr20" type="primary" text="确定"></u-button>
<u-button @click="show=false" size="small" class="ml20 mr20" type="error" text="返回"></u-button>
</div>
</view>
</u-popup>
</view>
</template>
<script>
const start = 'static/ITkoala-amap/start.png'
import {
GetGrid,
GetWorkGrid
} from '@/config/api.js'
export default {
data() {
return {
dataIndex: {
"areaCode": '',
"areaName": '',
"streetCode": '',
"streetName": '',
"communityCode": '',
"communityName": '',
"workGridCode": '',
"workGridName": '',
"gridCode": '',
},
windowHeight: 0,
markerList: {
latitude: '',
longitude: '',
list: []
},
list: [],
show: false,
bianhao: '',
addressname: '',
latitude: '',
longitude: '',
address: ''
}
},
computed: {
// gridCode: function() {
// var typedata = {}
// this.list.forEach((type, index) => {
// if (this.dataIndex == index) {
// typedata = type
// }
// });
// return typedata.gridCode
// },
// workGridName: function() {
// var typedata = {}
// this.list.forEach((type, index) => {
// if (this.dataIndex == index) {
// typedata = type
// }
// });
// return typedata.workGridName
// },
},
mounted() {
var that = this;
this.$nextTick(() => {
this.GetWorkGrid()
this.getlocation()
})
uni.getSystemInfo({
success: function(res) {
that.windowHeight = res.windowHeight
}
})
},
methods: {
getcity() {
var that = this;
uni.request({
header: {
"Content-Type": "application/text"
},
//注意:这里的key值需要高德地图的 web服务生成的key 只有web服务才有逆地理编码
url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' + this.longitude + ',' +
this.latitude + '&key=e7a648619ef72020346d66bd5a4065b3&radius=1000&extensions=all',
success(re) {
console.log(re)
if (re.statusCode === 200) {
that.addressname = re.data.regeocode.formatted_address
that.show = true
} else {
console.log("获取信息失败，请重试！")
}
}
});
},
confirm() {
uni.$emit('address', {
gridCode: this.dataIndex.gridCode,
workGridCode: this.dataIndex.workGridCode,
latitude: this.latitude,
longitude: this.longitude,
address: this.addressname,
});
uni.navigateBack({
})
},
getlocation: function() {
var that = this;
uni.getLocation({
type: 'gcj02',
success: function(res) {
that.latitude = res.latitude;
that.longitude = res.longitude;
that.markerList.latitude = that.latitude
that.markerList.longitude = that.longitude
},
fail: function(ret) {
console.log(JSON.stringify(ret));
}
});
},
GetWorkGrid() {
var that = this;
this.list = uni.getStorageSync('GetWorkGrid2')
var data = []
var data2 = [
[]
]
this.list.grids.forEach((item2, index) => {
item2.coordinateRange.forEach((type2, index2) => {
var data3 = []
data3.push(type2.x)
data3.push(type2.y)
data2[0].push(data3)
if (index2 == 0) {
that.markerList.latitude = type2.x
that.markerList.longitude = type2.y
}
});
data.push({
data: data2,
"areaCode": item2.areaCode,
"areaName": item2.areaName,
"streetCode": item2.streetCode,
"streetName": item2.streetName,
"communityCode": item2.communityCode,
"communityName": item2.communityName,
"workGridCode": item2.workGridCode,
"workGridName": item2.workGridName,
"gridCode": item2.gridCode,
})
});
console.log(data)
console.log(data[0].data[0][0][0])
console.log('地图')
that.markerList.list = data
},
//地图点击回调事件
onViewClick(params) {
// this.dataIndex = params.dataIndex
this.dataIndex = {
"areaCode": params.dataIndex.areaCode,
"areaName": params.dataIndex.areaName,
"streetCode": params.dataIndex.streetCode,
"streetName": params.dataIndex.streetName,
"communityCode": params.dataIndex.communityCode,
"communityName": params.dataIndex.communityName,
"workGridCode": params.dataIndex.workGridCode,
"workGridName": params.dataIndex.workGridName,
"gridCode": params.dataIndex.gridCode,
}
this.latitude = params.latitude
this.longitude = params.longitude
console.log(params)
this.getcity()
console.log(this.dataIndex)
}
}
}
</script>
<script module="amap" lang="renderjs">
import config from '@/components/ITkoala-amap/config.js'
export default {
data() {
return {
map: null,
longitude: '',
latitude: '',
address: '',
geoCoder: null,
ownerInstanceObj: null //service层对象
}
},
mounted() {
if (typeof window.AMap === 'function') {
this.initAmap()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
},
methods: {
initAmap() {
var that = this;
this.map = new AMap.Map('amap', {
resizeEnable: true,
center: ['105.065513639543', '29.590236872034'],
layers: [ //使用多个图层
// new AMap.TileLayer.Satellite() //使用卫星图
],
zooms: [4, 18], //设置地图级别范围
zoom: 16
})
that.markerList.list.forEach((type, index) => {
that.addPolygon(type)
});
// this.initMarkers()
},
addPolygon(data) {
let polygon = new AMap.Polygon({
path: data.data,
fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
strokeColor: '#2b8cbe',
strokeWeight: 1,
strokeStyle: 'dashed',
strokeDasharray: [5, 5],
});
polygon.on('click', (e) => {
// polygon.setOptions({
// fillOpacity: 0.7,
// fillColor: 'red'
// })
this.latitude = e.lnglat.getLat()
this.longitude = e.lnglat.getLng()
this.dataIndex = data
var datas = []
this.onClick(this.ownerInstanceObj)
})
this.map.add(polygon);
},
//初始化标记点
initMarkers() {
let prevMarker = null
let prevIcon = null
this.markerList.list.forEach((item, index) => {
if (!!item.icon) {
//添加点标记
let marker = new AMap.Marker({
position: new AMap.LngLat(item.lng, item.lat),
offset: new AMap.Pixel(-13, -30),
icon: item.icon
})
marker.on('click', () => {
if (prevMarker) {
prevMarker.setIcon(prevIcon)
}
prevIcon = item.icon
prevMarker = marker
this.dataIndex = index
this.onClick(this.ownerInstanceObj)
})
this.map.add(marker)
}
})
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
this.ownerInstanceObj = ownerInstance
// this.initMarkers()
this.markerList.list.forEach((type, index) => {
this.addPolygon(type)
});
},
onClick(ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
dataIndex: this.dataIndex,
longitude: this.longitude,
latitude: this.latitude,
address: this.address,
})
}
}
}
</script>
<style lang="scss" scoped>
#amap {
width: 100%;
height: 600rpx;
}
.infoWindow-wrap {
margin-left: 50px;
color: #f00;
}
.buts {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
width: 400rpx;
margin: 0 auto;
padding-top: 40rpx;
padding-bottom: 20rpx;
}
.ml20 {
margin-left: 20rpx;
margin-right: 20rpx;
}
.mr20 {
margin-right: 20rpx;
}
.popUpWin {
width: 630rpx;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
padding: 30rpx;
text {
line-height: 60rpx;
}
.info {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-weight: bold;
width: 500rpx;
margin: 0 auto;
font-size: 35rpx;
}
}
</style>
