十、前端：调用百度地图插件实现标注内容展示以及标注跳转@2020

个人说明：参考了网上一些博主文章，实在找不到他们的地址了，很抱歉，但是从他们的文章中得到灵感，然后在百度源代码编辑器中去实现自己需要的需求，他们的分享让我们得到了成长，所以我也毫不吝啬，将功能代码分享给大家，希望能给大家带来帮助，在此非常感谢其它分享百度插件功能的博主，谢谢！编译说明：个人是直接在线上百度api地图里面进行编写以及运行的，所以直接贴出百度地图源代码编辑器内容。我把大多功能的注释都写

穆林森

1064人浏览 · 2020-05-26 11:13:07

穆林森 · 2020-05-26 11:13:07 发布

个人说明：
参考了网上一些博主文章，实在找不到他们的地址了，很抱歉，但是从他们的文章中得到灵感，然后在百度源代码编辑器中去实现自己需要的需求，他们的分享让我们得到了成长，所以我也毫不吝啬，将功能代码分享给大家，希望能给大家带来帮助，在此非常感谢其它分享百度插件功能的博主，谢谢！
编译说明：
个人是直接在线上百度api地图里面进行编写以及运行的，所以直接贴出百度地图源代码编辑器内容。我把大多功能的注释都写进去了，然后做项目的话自己准备好百度api密钥
一、代码部分

<!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>

功能代码在上方，如有问题，若不嫌弃，可以私信我，一起探讨，一起成长