本来项目的最初是想要高德地图，经过一番折腾发现高德地图打点在生产环境不显示，选择的百度地图，百度地图非常好用
const initMap = async () =>{
let BMapGL= window.BMapGL
map = new BMapGL.Map("container");
let point = new BMapGL.Point(114.654281,37.886911);
map.centerAndZoom(point, 13);
map.enableScrollWheelZoom(true);
// map.disableDragging(); //禁止拖拽
// let styleId = '4217e293f315a66dc78a9be3a0513c05'
// let mapStyle = {
// styleId: styleId,
// };
// map.setMapStyleV2(mapStyle); // 地图颜色
var myIcon = new BMapGL.Icon("../../../assets/images/index/icon_map.png", new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
// var marker = new BMapGL.Marker(point, {icon: myIcon});
getWellList().then(response => {
mapList.value = response.data
mapList.value.forEach(item => {
let marker = new BMapGL.Marker(
new BMapGL.Point(item.lon, item.lat),
)
map.addOverlay(marker);
var opts = {
// width: 250, // 信息窗口宽度
// height: 150, // 信息窗口高度
title: item.wellName,//"水井", // 信息窗口标题
offset: {width: 0, height: -25}
}
let online = +item.wellOnlie === 1 ? "<span style='color: #14AE68'>在线</span>" : '<span>离线</span>'
var content = "<div style='line-height: 30px; color: #666; font-size: 14px;'><div>编号："+item.wellCode+"</div><div>地址："+item.wellAddres+"</div><div>状态："+online+"</div></div>"
var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
marker.addEventListener('mouseover', function(e) {
// infoWindow.setContent(content);
map.openInfoWindow(infoWindow, e.target.latLng); // 打开信息窗口
})
marker.addEventListener('mouseout', function() {
map.closeInfoWindow(); // 关闭信息窗口
})
});
}).catch(() => {
}).finally(() => {
});
}
这是高德地图,本地localhost访问没问题，但是生产环境标点标点不显示，代码有报错
const initMap = async () =>{
window._AMapSecurityConfig = {
securityJsCode: '秘钥'
}
AMapLoader.load({
key: 'key',// 去高德地图申请
version: '2.0',
// plugins: ['AMap.DistrictLayer', 'AMap.HawkEye', 'AMap.Marker','AMap.Icon', 'AMap.Size',]
plugins: ['AMap.DistrictLayer', 'AMap.HawkEye', 'AMap.Marker', 'AMap.Size',]
}).then(async (AMap) => {
// 创建地图实例
map = new AMap.Map('container', {
viewMode: '2D',
zoom: 13,
zooms: [4, 16],
center: [114.654281,37.886911],
mapStyle: 'amap://styles/noramal'
});
// 添加行政区划图层
// const districtLayer = new AMap.DistrictLayer.Country({
// SOC: 'CHN',
// depth: 3,
// zIndex: 90,
// styles: DISTRICT_LAYER_DEFAULT_STYLE
// });
// 添加鹰眼控件
// var hawkEye = new AMap.HawkEye({
// isOpen: true,
// position: 'RB',
// mapStyle: 'amap://styles/normal'
// });
// map.add(districtLayer);
// map.addControl(hawkEye);
getWellList().then(response => {
mapList.value = response.data
console.log("mapList.value:", mapList.value);
// 设置icon
// let img = require("../../../assets/images/index/icon_map.png");
var endIcon = new AMap.Icon({
size: new AMap.Size(30, 41),
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
imageSize: new AMap.Size(30, 41),
});
var marker = []
mapList.value.forEach((item, index) => {
let itemMark = new AMap.Marker({
title: item.wellName,
info: item,
position: new AMap.LngLat(item.lon, item.lat),
icon: endIcon,
});
marker.push(itemMark)
itemMark.on('mouseover', markClick)
itemMark.on('mouseout', markClose)
});
// 将 markers 添加到地图
map.add(marker);
// var content = [
// "<div style='color: #f0f;'>这是水井 ",
// "<div><b>高德软件有限公司</b>",
// "电话 : 010-84107000 邮编 : 100102",
// "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
// ]
// 创建 infoWindow 实例
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow('title', ''), //传入 dom 对象，或者 html 字符串
offset: new AMap.Pixel(-4, -30)
});
// 实现自定义窗体内容，返回拼接后的字符串
function createInfoWindow (title, content){
// 内容拼接 ...
return content;
}
// }
function markClick(e){
let item = e.target._originOpts.info
console.log('labelTitle:', item);
let online = +item.wellOnlie === 1 ? "<span style='color: #14AE68'>在线</span>" : '<span>离线</span>'
var content = [
"<div style='line-height: 30px; color: #666; font-size: 14px;'><div>名称："+item.wellName+"</div><div>编号："+item.wellCode+"</div><div>地址："+item.wellAddres+"</div><div>状态："+online+"</div></div>"
]
infoWindow.setContent(content);
var position = new AMap.LngLat(e.target._originOpts.position.lng, e.target._originOpts.position.lat);
infoWindow.open(map, position);
}
function markClose(){
map.clearInfoWindow();
}
}).catch(() => {
}).finally(() => {
});
// setMapListener(); // 设置事件监听
// })
// .catch((e) => {
// console.error('地图加载失败:', e);
// });
}
