绳墨

在百度地图API中添加带图片和超链接的复杂多点坐标标注

Written by

inkrope

in

因为工作上的原因，需要在地图上标注公司分支机构的坐标和具体信息，考虑到自己制作地图技术难度和时间成本过高，于是开始查阅目前使用已经非常成熟的百度地图API来实现目的，通过API的范例视图页面可以很轻松的通过几行代码在地图中添加单个标注，但对于添加多个标注，特别是包含超链接和图片信息的信息窗口界面等功能上就没有过多的介绍了，因为没学过Javascript，所以花费了一天的时间才弄清楚原理，效果如题图，下面我们来看看代码。

<!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" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aUswmSUClncU3iM4ODGZoWrb"></script>
    <title>公司机构分布图</title>
    <style type="text/css">
      body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
    </style>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>

<script type = "text/javascript" >
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom("北京市", 12); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
var infos = "西城分公司,王二狗,01059229352,116.384,39.925,http://192.241.199.121/pic/1.jpg,http://192.241.199.121/pic/2.jpg,西城区月坛北路8号,http://192.241.199.121/test.html;东城分公司,李大猫,01059228888,116.461317,39.913376,http://192.241.199.121/pic/1.jpg,http://192.241.199.121/pic/2.jpg,东城区朝内大街81号,http://192.241.199.121/test.html";
var info = infos.split(";");//创建数组
var len = info.length;
var infoWindow = new BMap.InfoWindow(""); //创建信息窗口
for (var i = 0; i < len; i++) {
var information = info[i].split(",");
createMarker(information[3], information[4], information[0], information[1], information[2], information[5],information[6],information[7],information[8]);
}

function createMarker(lng, lat, name, linkMan, phone, pic1,pic2,address,web) {
var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var content = name + "<br/>联系人:" + linkMan + "<br/>电话:" + phone + "<br/>地址："+address+"<br/><img src="+pic1+" >"+ "<br/><img src="+pic2+">" + "<br/>具体信息请点击:<a href="+web+">这里</a>";
marker.addEventListener("click", function() {
infoWindow.setContent(content);
this.openInfoWindow(infoWindow);
});    //创建信息窗口事件
} 
</script>
</html>

 

More posts