108 lines
3.6 KiB
JavaScript
108 lines
3.6 KiB
JavaScript
//高德地图
|
||
import * as websocketUtils from 'utils/websocketUtils.js';
|
||
|
||
|
||
|
||
//创建高德地图
|
||
export function creatAMap(key){
|
||
console.log('创建map对象');
|
||
// websocketUtils.getLocaton((res) => {
|
||
|
||
// })
|
||
const map = new AMap.Map(key, {
|
||
viewMode: '2D', //默认使用 2D 模式
|
||
zoom: 11, //地图级别
|
||
|
||
center: [116.397428, 39.90923], //地图中心点
|
||
});
|
||
// amapLocation();
|
||
amapLocation(map);
|
||
return map;
|
||
}
|
||
|
||
export function addMarker(map,pointMap,orderList,clickCellBack){
|
||
//清空点位
|
||
map.clearMap();
|
||
Object.keys(pointMap).forEach(key => {
|
||
let data = pointMap[key];
|
||
let uData = ((orderList || []).find(x => x.userId == key) || {});
|
||
if(data){
|
||
let xy = data.split(',');
|
||
let x = Number(xy[1]);
|
||
let y = Number(xy[0]);
|
||
let position = new AMap.LngLat(x,y);
|
||
|
||
//创建 AMap.Icon 实例：
|
||
// let icon = new AMap.Icon({
|
||
// size: new AMap.Size(25, 34), //图标尺寸
|
||
// image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
|
||
// imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
|
||
// imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
|
||
// });
|
||
|
||
let marker = new AMap.Marker({
|
||
id: key,
|
||
title: uData.artificerName,
|
||
position: position,
|
||
// 将 html 传给 content
|
||
// <!img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png"/>
|
||
content: `
|
||
<div class="custom-content-marker">
|
||
<div class="marker_border">
|
||
<img src="${ uData.artificerImg?uData.artificerImg: '../../static/logo.png' }"/>
|
||
<!--div>${ uData.artificerName }</div-->
|
||
<div class="marker_foot"></div>
|
||
</div>
|
||
</div>
|
||
`,
|
||
// 以 icon 的 [center bottom] 为原点
|
||
offset: new AMap.Pixel(-13, -30)
|
||
});
|
||
map.add(marker);
|
||
marker.on('click',(e) => {
|
||
console.log('点击后！',e,uData)
|
||
if(e.originEvent.type == 'touchend'){
|
||
//弹出框
|
||
clickCellBack?clickCellBack(e,uData):null;
|
||
}
|
||
})
|
||
}
|
||
});
|
||
}
|
||
|
||
export function amapLocation(map){
|
||
AMap.plugin('AMap.Geolocation', function() {
|
||
var geolocation = new AMap.Geolocation({
|
||
enableHighAccuracy: true,//是否使用高精度定位，默认:true
|
||
timeout: 10000, //超过10秒后停止定位，默认：5s
|
||
position:'RB', //定位按钮的停靠位置
|
||
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
|
||
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
|
||
|
||
});
|
||
map.addControl(geolocation);
|
||
geolocation.getCurrentPosition(function(status,result){
|
||
if(status=='complete'){
|
||
//onComplete(result)
|
||
console.log('定位成功,坐标为：',result.position,result);
|
||
}else{
|
||
//onError(result)
|
||
console.error('定位失败','失败原因排查信息:'+result.message+'</br>浏览器返回信息：'+result.originMessage);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
//解析定位结果
|
||
function onComplete(data) {
|
||
document.getElementById('status').innerHTML='定位成功'
|
||
var str = [];
|
||
str.push('定位结果：' + data.position);
|
||
str.push('定位类别：' + data.location_type);
|
||
if(data.accuracy){
|
||
str.push('精度：' + data.accuracy + ' 米');
|
||
}//如为IP精确定位结果则没有精度信息
|
||
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
|
||
document.getElementById('result').innerHTML = str.join('<br>');
|
||
}
|