咨询热线
137 1731 25507×24小时服务热线
微信交流
终于等到你，还好我没放弃现在很多的企业及个人网站的联系信息单页面中都添加了百度地图，以方便浏览者查看地址所在地图的位置，功能强大又美观，更重要的是制作百度地图很简单，只需一些HTML代码基础便可实现，而且百度提供了地图生成器来创建地图，创建过程很简单，只需三个步骤即可完成。但是如果你想在地图上显示多个带跳动动画效果的标注点提示，该如何制作呢？今天我在网站建设任务中就遇到了这个问题，根据客户的要求需要在地图上标注多个实体分店。
国际惯例，查阅网上资料并参考别人的解决方法，结合自身的需求，得出以下实现完整代码（在百度地图上标注东莞市内多个公园）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在百度地图上标注东莞市内多个公园-网站程序网</title>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;outline:none;list-style:none}
html,body,.map{width:100%;height:100%}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var markerArr = [
{ title:"旗峰公园", point:"113.781364,23.022542", address:"东城中路2号(东莞大道和东城中路交汇处)", tel:"(0769)22463895" },
{ title:"东莞虎英郊野公园", point:"113.794346,23.015762", address:"迎宾路", tel:"(0769)22663531" },
{ title:"榴花公园", point:"113.823023,23.088688", address:"莞龙路", tel:"(0769)22618377" },
{ title:"东莞人民公园", point:"113.766222,23.045869", address:"公园路1号", tel:"0769-22221792,0769-22225792" },
{ title:"大岭山森林公园", point:"113.809386,22.868039", address:"东莞市松山湖开发区附近", tel:"" },
{ title:"银瓶山森林公园", point:"114.235563,22.910908", address:"市辖区", tel:"" },
{ title:"大屏嶂森林公园", point:"114.040908,22.78515", address:"东莞市塘厦镇森林公园路10号", tel:"(0769)87727337" },
{ title:"同沙生态公园", point:"113.80606,22.974156", address:"广东省东莞市莞长路388号", tel:"(0769)22675268" },
{ title:"水濂山森林公园", point:"113.763968,22.939822", address:"广东省东莞市市辖区", tel:"(0769)22678983" }];
function map_init() {
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(113.766222,23.045869); //地图中心点，东莞市
map.centerAndZoom(point, 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
for (var i=0; i<markerArr.length; i++)
{
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
marker[i].setLabel(label);
info[i] = new window.BMap.InfoWindow("<p>" + markerArr[i].title + "<br>地址：" + markerArr[i].address + "<br> 电话：" + markerArr[i].tel + "</p>"); // 创建信息窗口对象
}
marker[0].addEventListener("mouseover", function(){this.openInfoWindow(info[0]);});
marker[1].addEventListener("mouseover", function(){this.openInfoWindow(info[1]);});
marker[2].addEventListener("mouseover", function(){this.openInfoWindow(info[2]);});
marker[3].addEventListener("mouseover", function(){this.openInfoWindow(info[3]);});
marker[4].addEventListener("mouseover", function(){this.openInfoWindow(info[4]);});
marker[5].addEventListener("mouseover", function(){this.openInfoWindow(info[5]);});
marker[6].addEventListener("mouseover", function(){this.openInfoWindow(info[6]);});
marker[7].addEventListener("mouseover", function(){this.openInfoWindow(info[7]);});
marker[8].addEventListener("mouseover", function(){this.openInfoWindow(info[8]);});
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
</script>
</body>
</html>