如何实现百度地图上显示多个自定义内容不一样的标注

Posted 2023-03-22

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();
本回答被提问者和网友采纳

百度地图api同时标注多个点但信息框一样

我点击一个按钮“重庆市” 进去 希望在地图上显示出重庆市的一些符合规则的企业，当然是有很多个的，每个企业一个标注(就是一个红点),点击标注 弹出一个框 显示企业的详细信息。。 问题来了。。标注可以循环添加多个 但是 那个弹出框却永远都是一个， 也就是说 不管点击哪个标注 弹出的都是一个弹出框 显示的内容都是一样的，都是最后一个企业的信息。。。

参考技术A /**
* 添加标记
* @param [id:主键,name:名称,lon:经度,lat:纬度,icon:图标,context:弹窗内容,viewImg:弹窗图片,...] data
*/
function addMar(data)
for(var i = 0; i < data.length; i++)
var marker = new BMap.Marker(new BMap.Point(data[i].lon, data[i].lat),icon:new BMap.Icon(data[i].icon, new BMap.Size(50,50)));  // 创建标注
marker.setTitle(data[i].name);
marker.dataCont = data[i];

map.addOverlay(marker);

marker.addEventListener("click", function(e)   
var viewWin = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+e.target.dataCont.name+"</h4>" + 
"<img style='float:right;margin:4px' id='imgDemo' src='"+e.target.dataCont.viewImg+"' width='139' height='104' title='"+e.target.dataCont.name+"'/>" + 
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+e.target.dataCont.context+"</p>" + 
"</div>";
var infoWindow = new BMap.InfoWindow(viewWin);
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function ()
infoWindow.redraw();//防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏

);

可以这样,先把生成标注的json数据直接存进marker对象.添加marker的点击监听,触发监听事件时会拿到marker对象本身,从里面可以获取之前我们存进去的json数据,然后拿这个json数据直接生成弹窗

参考技术B 百度的API只能做这些了，要想一次性全部加载各个企业的信息框，得自己去实现，难度应该也不大，写个脚本就可以本回答被提问者采纳 参考技术C 您好，该问题不属于标注认领问题，给您带来了不便，非常抱歉。