使用百度地图，怎样实现循环显示出所有的点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用百度地图，怎样实现循环显示出所有的点相关的知识，希望对你有一定的参考价值。
需要代码插入，试一下！[html] view plaincopyprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图API显示多个标注点带提示的代码</title>
<!--css-->
<link href="style/demo.css" rel="stylesheet" type="text/css" />
<!--javascript-->
<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="scripts/demo.js" type="text/javascript"></script>
</head>
<body>
<div class="demo_main">
<fieldset class="demo_title">
百度地图API显示多个标注点带提示的代码
</fieldset>
<fieldset class="demo_content">
<div style="min-height: 300px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var markerArr = [
title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" ,
title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" ,
title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" ,
title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000"
];
function map_init()
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市
map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
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 style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></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]);
);
//异步调用百度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>
</fieldset>
</div>
</body>
</html> 参考技术A 01.var map = new BMap.Map("Mapcontainer");
02. var JsonObj = eval(JsonStr);
03. if (JsonObj != null)
04. for (var i = 0; i < JsonObj.length; i++)
05. (function (x)
06. var point = new BMap.Point(JsonObj[x].Visit_GPS_Longitude, JsonObj[x].Visit_GPS_Latitude); // 创建点坐标
07. map.centerAndZoom(point, 13);
08. var marker = new BMap.Marker(point);
09. var opts =
10. width: 250, // 信息窗口宽度
11. height: 100, // 信息窗口高度
12. title: '<span style="font-size:15px;color:#0A8021">' + JsonObj[x].CustomerName + '</span>' // 信息窗口标题
13.
14. //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
15. var content = "进店时间 " + JsonObj[x].VisitBeginTime + "<br/>离店时间 " + JsonObj[x].VisitEndTime;
16. var info_Window = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
17. marker.addEventListener("click", function ()
18. this.openInfoWindow(info_Window);
19. );
20. map.addOverlay(marker);
21. )(i);
22.
23. map.addControl(new BMap.NavigationControl());
var map = new BMap.Map("Mapcontainer");
var JsonObj = eval(JsonStr);
if (JsonObj != null)
for (var i = 0; i < JsonObj.length; i++)
(function (x)
var point = new BMap.Point(JsonObj[x].Visit_GPS_Longitude, JsonObj[x].Visit_GPS_Latitude); // 创建点坐标
map.centerAndZoom(point, 13);
var marker = new BMap.Marker(point);
var opts =
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: '<span style="font-size:15px;color:#0A8021">' + JsonObj[x].CustomerName + '</span>' // 信息窗口标题
//marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var content = "进店时间 " + JsonObj[x].VisitBeginTime + "<br/>离店时间 " + JsonObj[x].VisitEndTime;
var info_Window = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
marker.addEventListener("click", function ()
this.openInfoWindow(info_Window);
);
map.addOverlay(marker);
)(i);
map.addControl(new BMap.NavigationControl()); 同样是一个循环，但是在循环中使用了一个匿名函数，从而造成一个闭包将 i 的值锁定在里面，这样外部的值已经变化，
但是传到闭包里面的值已经被保留，也就可以顺利拿到应该取到的address[i]的内容了。
这样虽然解决了问题，但是每添加一个点都会创建一个匿名函数，内存泄漏可能会是潜在隐患。
接下去， 我们就可以自由的在地图上标注点并显示对应的信息了！本回答被提问者和网友采纳 参考技术B 01.var map = new BMap.Map("Mapcontainer");
02. var JsonObj = eval(JsonStr);
03. if (JsonObj != null)
04. for (var i = 0; i < JsonObj.length; i++)
05. (function (x)
06. var point = new BMap.Point(JsonObj[x].Visit_GPS_Longitude, JsonObj[x].Visit_GPS_Latitude); // 创建点坐标
07. map.centerAndZoom(point, 13);
08. var marker = new BMap.Marker(point);
09. var opts =
10. width: 250, // 信息窗口宽度
11. height: 100, // 信息窗口高度
12. title: '<span style="font-size:15px;color:#0A8021">' + JsonObj[x].CustomerName + '</span>' // 信息窗口标题
13.
14. //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
15. var content = "进店时间 " + JsonObj[x].VisitBeginTime + "<br/>离店时间 " + JsonObj[x].VisitEndTime;
16. var info_Window = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
17. marker.addEventListener("click", function ()
18. this.openInfoWindow(info_Window);
19. );
20. map.addOverlay(marker);
21. )(i);
22.
23. map.addControl(new BMap.NavigationControl());
var map = new BMap.Map("Mapcontainer");
var JsonObj = eval(JsonStr);
if (JsonObj != null)
for (var i = 0; i < JsonObj.length; i++)
(function (x)
var point = new BMap.Point(JsonObj[x].Visit_GPS_Longitude, JsonObj[x].Visit_GPS_Latitude); // 创建点坐标
map.centerAndZoom(point, 13);
var marker = new BMap.Marker(point);
var opts =
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: '<span style="font-size:15px;color:#0A8021">' + JsonObj[x].CustomerName + '</span>' // 信息窗口标题
//marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var content = "进店时间 " + JsonObj[x].VisitBeginTime + "<br/>离店时间 " + JsonObj[x].VisitEndTime;
var info_Window = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
marker.addEventListener("click", function ()
this.openInfoWindow(info_Window);
);
map.addOverlay(marker);
)(i);
map.addControl(new BMap.NavigationControl()); 同样是一个循环，但是在循环中使用了一个匿名函数，从而造成一个闭包将 i 的值锁定在里面，这样外部的值已经变化.
这样虽然解决了问题，但是每添加一个点都会创建一个匿名函数，内存泄漏可能会是潜在隐患。
接下去， 就可以自由的在地图上标注点并显示对应的信息了. 参考技术C
这是百度加载多个点的代码
<!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:"微软雅黑";
#l-mapheight:100%;width:78%;float:left;border-right:2px solid #bcbcbc;
#r-resultheight:100%;width:20%;float:left;
</style>
<script type="text/javascript" src="http://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");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 编写自定义函数,创建标注
function addMarker(point)
var marker = new BMap.Marker(point);
map.addOverlay(marker);
// 随机向地图添加25个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 25; i ++)
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
addMarker(point);
</script>
参考技术D 没有那个功能的，途经点也只能设置一个。 第5个回答 2015-12-23 有个标记功能，试试看 第6个回答 2016-01-07 想知道你要表达的是什么意思
如何实现百度地图上显示多个自定义内容不一样的标注
1,第一步当然是建立百度地图放置的容器嘛,这个不解释<div class="s_r" style="float:left;width:680px;height:620px;margin-top:10px " id="container2"></div>
2,地图旁增加一排文字,把标注点的信息一个一个都列出来,这个以后要用于和地图上的标注连接起来的,在这边点击一下,地图那边标注相应的点就弹出提示信息了,样式就是如下
<ul>
<u class="name"><a href="" target="_blank"id="list0">标注点1</a></u>
<li >简介1</li>
<uclass="name"><a href="" target="_blank"id="list1">标注点2</a></u>
<li >简介2</li>
</ul>
这个东西不要手工写,最好用php把数组循环出来写进去,这个数组就是你要标注的点的所有信息啊,比如名字,电话,标注点的经纬度,数据库的id号等等,因为后面在javascript中也要用到这个php的数组,保持顺序一致是很重要的,不要问我这个数组哪里来,这个问自己...,我这边的是这样写的,$areashoplist就是准备好的数组,$key是数组中元素的顺序,写在这里便于以后分辨连接.
<?php
foreach($areashoplist as $key=>$rs)
?>
<ul>
<u class="name">
<a href="<?php echo W_BASE_URL;?>dealers/<?php echo $rs["id"]?>/" target="_blank" id="list<?php echo $key ?>"><?php echo $rs['company']?>
</a>
</u>
<li ><?php echo $rs['address']?></li>
<li>销售热线：<?php echo $rs['tel']?></li>
</ul>
<?php
?>
3,下来就可以去页面的下面写javascript代码了,首先要把php后台给你的数组$areashoplist变成javascript的数组,这个很简单嘛,就是循环嘛,按着格式循环出来就行了.
var markerArr=[<?php foreach($areashoplist as $map)
echo "title:\"".$map['company']."\",content:\"".$map['address']."\",point:\"".$map['mappoint']."\",isOpen:0,tel:\"".$map['tel']."\",";
?>
]
最后循环后的样式应该是这个样子就对了:
var markerArr=[
title:"陕西华岳汽车",content:"西安市西三环与富鱼路十字西南角",point:"108.872982,34.2581",isOpen:0,tel:"",
title:"陕西福海达汽车销售服务有限公司",content:"西安市西三环外阿房一路西段95号 ",point:"",isOpen:0,tel:"029-84253121",
]
4,准备工作做完了,下来开始做地图吧,前面几步都是一样的,城市中心点哪里,我是根据ip在数据库里查出的城市名,分配下来的,这样保证中心点一直在城市中心
//开始写地图基本信息
var map = new BMap.Map("container2");
//var pp =new BMap.Point("西安"); // 定义一个中心点坐标
map.centerAndZoom("<?php echo $cityname ?>",12); // 初始化地图,设置中心点坐标和地图级别。10为市级,这里的中心点用php写入"西安",这里不能加市字
var ctrl_nav = new BMap.NavigationControl(anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE); //定义向地图中添加缩放控件
map.addControl(ctrl_nav); //向地图中添加缩放控件
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl(anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1);
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl(anchor:BMAP_ANCHOR_BOTTOM_LEFT);
map.addControl(ctrl_sca);
5,地图准备工作做完了,下来要做就是添加标注点了,上面准备的那个数组就可以哪来用了,这里另外还准备了几个数组,用来存放标注点和提示信息窗口
var point=new Array(); //存放标注点经纬信息的数组
var marker=new Array(); //存放标注点对象的数组
var info=new Array(); //存放提示信息窗口对象的数组
for(var i=0;i<markerArr.length;i++)
p0 = markerArr[i].point.split(",")[0]; //
p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new BMap.Point(p0,p1); //循环生成新的地图点
marker[i]=new BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]); //在地图上循环添加标记
info[i]=new BMap.InfoWindow("<b class='iw_poi_title' title='" + markerArr[i].title + "'>" + markerArr[i].title + "</b><div class='iw_poi_content'>"+markerArr[i].content+"</div><div class='iw_poi_content'>销售热线:"+markerArr[i].tel+"</div>");
//生成提示信息窗口,并将窗口对象按顺序存入数组中
好了现在标注点,提示信息都按顺序存入数组了,提示点在地图上也已经显示出来了
6,下来就该把提示信息和相关的标注点绑定起来了,还是按循环一个一个的取,因为两个数组的顺序都是一样的,所以配对就好配对了
<?php
for($i=0;$i<count($areashoplist);$i++)
?>
marker[<?php echo $i;?>].addEventListener("mouseover", function()this.openInfoWindow(info[<?php echo $i;?>]););
<?php
?>
最后的结果就是有多少个标注点,绑定多少次,数组的下标已经固定了,不存在i值变化的情况,就绕开了开头提的那个闭包问题,在html下显示应该是这样的:
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]););
.........................................
7,下来该给外面的超链接绑定地图上标注点的显示了;有了上面的提示信息窗口数组,用jquery绑定一个事件当然就很简单了
<?php
for($i=0;$i<count($areashoplist);$i++)
if(is_null($areashoplist[$i]['mappoint'])) //如果mappoint没有设置则跳过本次循环,执行下一个循环
continue;
?>
$('#list<?php echo $i;?>').live('mouseover',function()
map.openInfoWindow(info[<?php echo $i;?>],point[<?php echo $i;?>]); //将信息提示窗口的显示按顺序绑定给外部的链接文字
return false;
);
<?php
//循环结束
?> 参考技术A 找到一个我以前写的百度地图demo里面的代码，你可以参考下。
/**
* 设置各大商家图标
*/
private void setAllLocationImage()
ArrayList<OverlayItem> items = new ArrayList<OverlayItem>();
for (int i = 0; i < mapItem.currentThemePoints.size(); i++)
OverlayItem item = new OverlayItem(mapItem.currentThemePoints.get(i), mapItem.mapDataItems.items.get(i).title, "" + mapItem.mapDataItems.items.get(i).type);
Drawable mark = getResources().getDrawable(R.drawable.search_ball_mark2);
mark.setBounds(0, 0, mark.getIntrinsicWidth(), mark.getIntrinsicHeight());
item.setMarker(mark);
items.add(item);
mapItem.itemOverlay = new MyOverlay(this, mark, mapItem, mapItem.currentThemePoints);
mapItem.mMapView.getOverlays().add(mapItem.itemOverlay);
mapItem.itemOverlay.addItem(items);
mapItem.mMapView.refresh();
本回答被提问者和网友采纳
以上是关于使用百度地图，怎样实现循环显示出所有的点的主要内容，如果未能解决你的问题，请参考以下文章