在项目开发中要用到地图功能,突然发现自己在地图方法的运用比较少,基本上没有这方法的经验,我只在小程序中用到地图,web端是没有后面同事跟我说之前有项目做地图开发,让我看一下之前的项目地图是怎么用的,看了之前的项目之后,对地图这块功能也是半懂不懂的,只能看地图的api文档,最终还是把这个功能完成了
这次一共完成跟地图有关的三个功能,第一功能就是在地图显示全部设备的标记点,第二个功能就是点击点显示对应的设备信息,第三个功能点,在地图上添加设备标记,
地图上添加设备标记
首先安装插件
npm install --save tmap
看腾讯地图官网
https://lbs.qq.com/webApi/javascriptGL/glDemo
通过经纬度获取地址
这块要重点说一下,因为腾讯地图是没有直接获取到地址,是要通过腾讯地图的一个api接口,通过经纬度和key值来获取地址,
key值是要注册帐号,创建一个应用,就会有一个key值
本地开发的时候在请求获取地址的api需要开一下本地代理,不然会出现跨域问题
获取地图标记地址代理代码
"proxy": {
"/ws": {
"enable": true,
"target": "https://apis.map.qq.com"
}
},
实例代码部分
import TMap from 'TMap'
//创建地图方法
const initMap = (data) =>{
console.log('data',data)
var center = new TMap.LatLng(23.12546, 113.358089);//设置中心点坐标
const map = new TMap.Map(document.getElementById('tmap'), {
center: center,//设置地图中心点坐标
// zoom: 17.2, //设置地图缩放级别
// pitch: 43.5, //设置俯仰角
// rotation: 45 //设置地图旋转角度
})
window.map = map
let geometries = []
if(data && data.id) {
geometries.push({
id: data.id,
position: new TMap.LatLng(data.lat, data.lng),
properties: data
})
}
console.log('geometries', geometries)
// 修改标记样式
var markerLayer = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
"myStyle": new TMap.MarkerStyle({
"width": 22, // 点标记样式宽度(像素)
"height": 32, // 点标记样式高度(像素)
//焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
"anchor": { x: 11, y: 32 }
})
},
});
if(data && data.id) {
markerLayer.add({
"styleId": 'myStyle', //指定样式id
position: geometries[0].position
});
}
// 添加标记
map.on('click', e => {
console.log('e', e.latLng)
markerLayer.setGeometries([])
markerLayer.add({
"styleId": 'myStyle', //指定样式id
position: e.latLng
});
getAddress(e.latLng)
})
}
//
// 通过经纬度获取地址方法
const getAddress = (data)=>{
axios.get(`/ws/geocoder/v1/?location=${data.lat},${data.lng}&key=RLPBZ-WLHWK-UWSJX-AS7K7-NYHPO-NDBOZ`)
.then(function (response) {
setLoading(false);
console.log('地址', response.data.result)
let res = response.data.result
let obj = {
lat: res.location.lat,
lng: res.location.lng,
address: res.address
}
setaddunitsList(obj)
})
.catch(function (error) {
common.NoticeError('地址数据获取', '地址数据获取失败', error)
setLoading(false);
})
}
// html部分
<div id="tmap" className={styles.tmapCon}></div>
地图显示全部设备的标记点,点击点显示对应的设备信息
initMap(list) {
const map = new TMap.Map(document.getElementById('tmap'), {
// center: center,//设置地图中心点坐标
// zoom: 17.2, //设置地图缩放级别
// pitch: 43.5, //设置俯仰角
// rotation: 45 //设置地图旋转角度
})
window.map = map
let geometries = []
let sw_lat, sw_lng, ne_lat, ne_lng
list.forEach((row, index) => {
row.lat = row.lat? row.lat: 23.11639
row.lng = row.lng? row.lng: 113.304434
geometries.push({
id: row.id,
styleId: 'label',
position: new TMap.LatLng(row.lat, row.lng),
content: row.name,
properties: row
})
console.log('geometries', geometries)
if (index > 0) {
if (sw_lat > row.lat) {
sw_lat = row.lat
}
if (sw_lng > row.lng) {
sw_lng = row.lng
}
if (ne_lat < row.lat) {
ne_lat = row.lat
}
if (ne_lng < row.lng) {
ne_lng = row.lng
}
} else {
sw_lat = row.lat
sw_lng = row.lng
ne_lat = row.lat
ne_lng = row.lng
}
})
//
var label = new TMap.MultiLabel({
id: 'label-layer',
map: window.map,
styles: {
'label': new TMap.LabelStyle({
'color': '#3777FF', //颜色属性
'size': 16, //文字大小属性
'offset': { x: -8, y: 0 }, //文字偏移属性单位为像素
'angle': 0, //文字旋转属性
'alignment': 'center', //文字水平对齐属性
'verticalAlignment': 'middle' //文字垂直对齐属性
})
},
geometries: geometries
});
// 创建点聚合对象
const markerCluster = new TMap.MarkerCluster({
id: 'cluster',
map: window.map,
enableDefaultStyle: true,
minimumClusterSize: 2,
geometries: geometries,
zoomOnClick: true,
gridSize: 60,
averageCenter: false,
maxZoom: true
})
// 计算LatLngBounds并设置显示范围
window.map.fitBounds(new TMap.LatLngBounds(
new TMap.LatLng(sw_lat - 0.03, sw_lng - 0.03),
new TMap.LatLng(ne_lat + 0.03, ne_lng + 0.03)
))
// 当前地图视口图片瓦片加载完时触发,关闭loading
map.on('tilesloaded', () => {
this.setState({
loading: false
})
})
// 点击地图图标显示弹窗
markerCluster.on('click', e => {
console.log('e', e)
if (e.geometry) {
map.setCenter(e.geometry.position)
this.setState({
title: '设备明细',
dtype: 'detail',
listdetail: false,
detailloading: true,
visible: true
})
this.getDetail(e.geometry.id)
} else {
console.log(123, e.cluster.geometries)
let arr = []
arr.push(e.cluster.geometries[0].properties)
}
})
this.setState({
map
})
}