前端:调用百度地图插件实现标注内容展示以及标注跳转
个人说明：为实现百度地图标注内容展示以及跳转
一、代码部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var data = [
[116.403931,39.91328,
"<p>北京</p><p>天安门</p><p>介绍：</p><p>电话：</p>",
"https://baike.baidu.com/item/%E5%A4%A9%E5%AE%89%E9%97%A8/63708?fr=aladdin"
]
];
//(data[0][0],data[0][1]):是标注坐标;
//data[0][2]:是拼接要展示的窗口内容(自己可以设计心中所属);
//data[0][3]是标注要跳转的链接;
var windowProperty = {
width: 200, // 窗口宽度
height: 200, // 窗口高度
title : "地点详情" // 窗口标题
};
//个人设计窗口比较简单,大家可自行设计心中所属
for (var i = 0; i < data.length; i++) {//遍历数组,制作制作标注
var myIcon = new BMap.Icon("https://api.map.baidu.com/images/marker_red_sprite.png",//红点我是自己直接使用百度的链接
new BMap.Size(38, 25));//属性可以自行设置
var marker = new BMap.Marker(new BMap.Point(data[i][0], data[i][1]), {
icon: myIcon
});//创建标注new BMap.Marker(point, { icon: myIcon });
marker.setAnimation(BMAP_ANIMATION_BOUNCE);//开启标注跳动
var content = data[i][2];//准备标注窗口内容
map.addOverlay(marker);//添加标注
//将信息添加到标注以及传递跳转链接内容
addClickHandler(content, marker, data[i][3]);
}
//开启鼠标移入移出事件
function addClickHandler(content, marker, myLink) {
marker.addEventListener("mouseover", function(e) {
openWindow(content, e)
});//移入调用开启窗口方法
marker.addEventListener("mouseout", function() {
map.closeInfoWindow();
})//移出关闭窗口
//添加点击事件；赋于跳转链接
marker.addEventListener('click', function() {
window.location.href = myLink;
})
}
//打开窗口方法
function openWindow(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var myInfoWindow = new BMap.InfoWindow(content, windowProperty);//创建窗口对象
map.openInfoWindow(myInfoWindow, point);//开启窗口
}
map.centerAndZoom(new BMap.Point(116.401314,39.91513),12);//初始化地图,设置中心点坐标和地图级别,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes: [//当前配置是混合地图
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
map.setCurrentCity("北京");//设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
</script>
</html>
功能代码在上方，如有问题，若不嫌弃，可以私信我，一起探讨，一起成长
