使用百度地图，怎样实现循环显示出所有的点

 我来答

9个回答

#合辑# 面试问优缺点怎么回答最加分？

lizhilipin
2016-01-15 · 超过22用户采纳过TA的回答

知道答主

回答量：86

采纳率：0%

帮助的人：19.1万

我也去答题访问个人页

关注

展开全部

需要代码插入，试一下！

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

<link href="style/demo.css" rel="stylesheet" type="text/css" />

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

本回答由电脑网络分类达人郭强推荐

已赞过 已踩过<

评论收起

匿名用户
推荐于2017-12-16

展开全部

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]的内容了。
这样虽然解决了问题，但是每添加一个点都会创建一个匿名函数，内存泄漏可能会是潜在隐患。
接下去， 我们就可以自由的在地图上标注点并显示对应的信息了！


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

lihongwei41
2015-12-30 · TA获得超过4万个赞

知道大有可为答主

回答量：2.5万

采纳率：0%

帮助的人：5971万

我也去答题访问个人页

关注

展开全部

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 的值锁定在里面，这样外部的值已经变化.
这样虽然解决了问题，但是每添加一个点都会创建一个匿名函数，内存泄漏可能会是潜在隐患。
接下去，就可以自由的在地图上标注点并显示对应的信息了.

已赞过 已踩过<

评论收起

百度网友4b0a6d36b
2015-12-30 · TA获得超过1032个赞

知道小有建树答主

回答量：803

采纳率：64%

帮助的人：126万

我也去答题访问个人页

关注

展开全部

这是百度加载多个点的代码

<!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-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
       #r-result{height: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>

已赞过 已踩过<

评论收起

wxyqzgc
2015-12-31 · TA获得超过6959个赞

知道大有可为答主

回答量：7971

采纳率：57%

帮助的人：1218万

我也去答题访问个人页

关注

展开全部

没有那个功能的，途经点也只能设置一个。

已赞过 已踩过<

评论收起

sunshinekid123
2015-12-23 · TA获得超过131个赞

知道答主

回答量：217

采纳率：71%

帮助的人：42.1万

我也去答题访问个人页

关注

展开全部

有个标记功能，试试看

已赞过 已踩过<

评论收起

bebay4
2016-01-07 · TA获得超过382个赞

知道小有建树答主

回答量：607

采纳率：0%

帮助的人：332万

我也去答题访问个人页

关注

展开全部

想知道你要表达的是什么意思

已赞过 已踩过<

评论收起

4条折叠回答

更多回答（7）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

使用百度地图，怎样实现循环显示出所有的点

其他类似问题

为你推荐：