跳转@2020"/>
十、前端：调用百度地图插件实现标注内容展示以及标注跳转@2020
个人说明：
参考了网上一些博主文章，实在找不到他们的地址了，很抱歉，但是从他们的文章中得到灵感，然后在百度源代码编辑器中去实现自己需要的需求，他们的分享让我们得到了成长，所以我也毫不吝啬，将功能代码分享给大家，希望能给大家带来帮助，在此非常感谢其它分享百度插件功能的博主，谢谢！
编译说明：
个人是直接在线上百度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/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>","/%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(".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>
功能代码在上方，如有问题，若不嫌弃，可以私信我，一起探讨，一起成长
更多推荐
十、前端：调用百度地图插件实现标注内容展示以及标注跳转@2020
发布评论