该博客介绍了如何使用高德地图API在Vue环境中创建多点标记并显示信息窗体。通过示例代码展示了如何遍历数据生成标记点，以及监听点击事件展示信息。同时，还提供了手动选点功能，用户可以点击地图选择新的设备经纬度，并弹窗确认设置。
1.marker标记,Text多点文本标记,标记信息窗体
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<!-- vue引入高德地图实现多点标记,点击标记点出现信息窗体 -->
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
</script>
</head>
<body>
<div id="app">
<div id="maps" style="width:900px;height: 550px"></div>
</div>
</body>
<!-- 获取鼠标点击经纬度 -->
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
tableData: [{
equipmentNumber: '3014-341078',
alarmNumber: '2345',
equipmentPosition: '中环路1111',
segmentNumber: '2345678974',
segmentName: '名称11',
naturalNumber: '234234234234-67867867',
naturalName: '中环11',
equipmentType: '综合检测1',
latitude: '104.09576',
longitude: '30.621637',
},
{
alarmNumber: '345345',
equipmentPosition: '中环路2222',
segmentNumber: '2345678974',
segmentName: '名称22',
naturalNumber: '234234234234-6786',
naturalName: '中环22',
equipmentNumber: '3014-341077',
equipmentType: '综合检测2',
latitude: '104.094623',
longitude: '30.620917'
}
],
}
},
mounted() {
this.mapApi();//初始化
},
methods:{
mapApi(){
var map = new AMap.Map("maps", {
resizeEnable: true,
center: [Number(this.tableData[0].latitude), Number(this.tableData[0].longitude)], //初始地图中心点
// zoom:13,//初始化地图级别
}); //初始化地图
//信息窗口实例
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30)
});
//遍历生成多个标记点
this.tableData.forEach((item, index) => {
var marker = new AMap.Marker({
position: [Number(item.latitude), Number(item.longitude)], //不同标记点的经纬度
map: map
});
marker.content = `
<div style='height:25px;background:#ECEFF4'></div>
<div style='padding:5px 10px'>
<div>设备编号:${item.equipmentNumber}</div>
<div>电警编号:${item.alarmNumber}</div>
<div>设备位置:${item.equipmentPosition}</div>
<div>发布段编号:${item.segmentNumber}</div>
<div>发布段名称:${item.segmentName}</div>
<div>自然段编号:${item.naturalNumber}</div>
<div>自然段名称:${item.naturalName}</div>
</div>
`;
marker.on('click', markerClick);
marker.emit('click', {
target: marker
}); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
})
//多点文本标记 longitude:经度 30.621637
var textMarker = [{
longitude: 30.634723,
latitude: 104.052144,
text: '交管局1'
},
{
longitude: 30.653332,
latitude: 104.052488,
text: '交管局2'
}
];
// //第一个点
textMarker.forEach((item1, index1) => {
var text = 'text' + index1;
text = new AMap.Text({
text: item1.text,
anchor: 'center', // 设置文本标记锚点
draggable: false,
cursor: 'pointer',
angle: 10,
style: {
'padding': '.75rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'transparent',
'width': '15rem',
'border-width': 0,
'font-weight': 'bold',
// 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '18px',
'color': '#881280'
},
position: [item1.latitude, item1.longitude]
});
text.setMap(map);
})
function markerClick(e) {
console.log('进判断1111', e)
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
}
}
})
</script>
</html>
2实现.手动选点功能
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<!-- vue引入高德地图实现多点标记,点击标记点出现信息窗体 -->
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
</script>
</head>
<body>
<div id="app">
<div id="maps" style="width:900px;height: 550px"></div>
</div>
</body>
<!-- 获取鼠标点击经纬度 -->
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
street:'',
lng:'',
lat:'',
tableData: [{
equipmentNumber: '3014-341078',
alarmNumber: '2345',
equipmentPosition: '中环路1111',
segmentNumber: '2345678974',
segmentName: '名称11',
naturalNumber: '234234234234-67867867',
naturalName: '中环11',
equipmentType: '综合检测1',
latitude: '104.09576',
longitude: '30.621637',
},
{
alarmNumber: '345345',
equipmentPosition: '中环路2222',
segmentNumber: '2345678974',
segmentName: '名称22',
naturalNumber: '234234234234-6786',
naturalName: '中环22',
equipmentNumber: '3014-341077',
equipmentType: '综合检测2',
latitude: '104.094623',
longitude: '30.620917'
}
],
}
},
mounted() {
},
methods:{
//打开编辑详情
editors() {
var map = new AMap.Map("maps", {
resizeEnable: true,
scrollWheel: true,
center: [Number(this.tableData[0].latitude), Number(this.tableData[0].longitude)], //初始地图中心点
// zoom:13,//初始化地图级别
}); //初始化地图
//遍历生成多个标记点
this.tableData.forEach((item, index) => {
var marker = new AMap.Marker({
position: [Number(item.latitude), Number(item.longitude)], //不同标记点的经纬度
map: map,
icon: new AMap.Icon({
image: "https://img2.baidu.com/it/u=2387934474,2979420926&fm=26&fmt=auto",
size: new AMap.Size(20, 20), //图标大小
imageSize: new AMap.Size(20,20)
})
});
})
//多点文本标记 longitude:经度 30.621637
var textMarker = [{
longitude: 30.634723,
latitude: 104.052144,
text: '交管局1'
},
{
longitude: 30.653332,
latitude: 104.052488,
text: '交管局2'
}
];
// //第一个点
textMarker.forEach((item1, index1) => {
var text = 'text' + index1;
text = new AMap.Text({
text: item1.text,
anchor: 'center', // 设置文本标记锚点
draggable: false,
cursor: 'pointer',
angle: 10,
style: {
'padding': '.75rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'transparent',
'width': '15rem',
'border-width': 0,
'font-weight': 'bold',
// 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '18px',
'color': '#881280'
},
position: [item1.latitude, item1.longitude]
});
text.setMap(map);
})
map.setFitView();
this.$confirm('确认变更该设备经纬度信息?', '确认变更位置', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const _this = this;
var geocoder = new AMap.Geocoder({
city: "010", //城市设为北京，默认：“全国”
radius: 1000 //范围，默认：500
});
var marker1 = new AMap.Marker();
function regeoCode() {
var lnglat = [_this.lng, _this.lat];
console.log('进11111', lnglat);
map.add(marker1);
marker1.setPosition(lnglat);
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete' && result.regeocode) {
var address = result.regeocode.formattedAddress;
//获取街道地址
_this.street = result.regeocode.addressComponent.street;
console.log('地址', _this.street);
_this.$confirm('是否设置设备?'+data.equipmentNumber+'经纬度到指定位置?'+'该位置坐标为'+_this.lng+','+_this.lat+'.发布路段为'+_this.street+' 自然路段为:'+_this.street, '更改设备经纬度', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
} else {
log.error('根据经纬度查询地址失败')
}
});
}
//获取鼠标点击位置经纬度
map.on('click', function(e) {
console.log('经纬度', e)
_this.lng = e.lnglat.lng;
_this.lat = e.lnglat.lat;
regeoCode();
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
}
})
</script>
</html>
转发请注明原创噢~~~~
看完记得点个赞哟！！！
4773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
