百度地图api 同时在地图上标注多个点 有问题 紧急求救
0
悬赏园豆：20
[待解决问题]
我点击一个按钮“长沙市” 进去 希望在地图上显示出长沙市的一些符合规则的企业，当然是有很多个的，每个企业一个标注(就是一个红点),点击标注 弹出一个框 显示企业的详细信息。。 问题来了。。标注可以循环添加多个 但是 那个弹出框却永远都是一个 也就是说 不管点击哪个标注 弹出的都是一个弹出框 显示的内容都是一样的。。。 纳闷啊。。代码如下：
1 function searchByArea(cps, cpa, cpn, areaMapAddress) {
2 var companys = cps;
3 var companysaddress = cpa;
4 var companyname = cpn;
5
6 var map = new BMap.Map("milkMap"); // 创建地图实例
7 var point = new BMap.Point(areaMapAddress.split(",")[0].toString(), areaMapAddress.split(",")[1].toString()); // 创建点坐标
8 map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别
9 //map.addControl(new BMap.OverviewMapControl({ isOpen: 1, anchor: BMAP_ANCHOR_TOP_RIGHT })); //为地图添加鹰眼
10 map.addControl(new BMap.NavigationControl(opts)); //为地图添加鱼骨
11
12 //给地图添加自定义的控件；
13 ZoomControl.prototype.initialize = initSearch(map);
14 var myZoomCtrl = new ZoomControl();
15 map.addControl(myZoomCtrl);
16
17
18 map.enableScrollWheelZoom(); //启动鼠标滚轮缩放地图
19 map.enableKeyboard(); //启动键盘操作地图
20
21 if (companys != "") {
22 var c = companys.split("|");
23 var caddress = companysaddress.split("|");
24 var cname = companyname.split("|");
25
26 if (c.length > 0) {
27 for (var i = 0; i < c.length; i++) {
28 var cc = c[i].split(",");
29 //------------开始标注一个地点----------
30 var pointMarker = new BMap.Point(cc[0], cc[1]); // 创建标注的坐标
31 var marker = new BMap.Marker(pointMarker); // 创建标注
32 map.addOverlay(marker); // 将标注添加到地图中
33
34 [color=#FF0000] var infowindow = new BMap.InfoWindow(cname[i].toString() +
35 "<br /> <span style='font-size:10px;'>公司地址:" + caddress[i].toString() +
36 "</span><br /><img src='../../images/telephone.ico' /><a href='#' style='line-height:3em;color:#005EAC;font-size:10px;text-decoration:none;'>88888888>></a>"); // 创建信息窗口对象
37
38 marker.addEventListener("click", function () { //给标注添加点击事件
39 this.openInfoWindow(infowindow);
40 });[/color]
41 var label = new BMap.Label(cname[i].toString(), { point: pointMarker, offset: new BMap.Size(3, -6) }); //定义一个文字标签
42 map.addOverlay(label);
43 }
44 }
45 }
46 }
所有回答(5)
0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>销售网络</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:800px;height:600px;border:1px solid gray" id="container" ></div>
</body>
</html>
<script type="text/javascript">
var mp = new BMap.Map("container");
var point = new BMap.Point(108.72205, 34.186879);
mp.centerAndZoom(point, 5);
mp.enableKeyboard();
mp.enableScrollWheelZoom();
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText) {
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
div.style.border = "1px solid #BC3B3A";
div.style.color = "white";
div.style.height = "18px";
div.style.padding = "2px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
div.onmouseover = function () {
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
this.getElementsByTagName("span")[0].innerHTML = that._overText;
arrow.style.backgroundPosition = "0px -20px";
}
div.onmouseout = function () {
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
this.getElementsByTagName("span")[0].innerHTML = that._text;
arrow.style.backgroundPosition = "0px 0px";
}
mp.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
var markerArr = [{ txt: "安康中心医院", point: "109.0349, 32.696176" }, { txt: "广州市第六人民医院", point: "113.370294,23.124695"}]
for (var i = 0; i < markerArr.length; i++) {
var txt = markerArr[i].txt;
var pintx = markerArr[i].point.split(',')[0];
var pinty = markerArr[i].point.split(',')[1];
mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(pintx, pinty), txt, txt));
}
</script>
0
我也遇到同样的问题，，怎么办？点击每一个标注它都只弹出最后一个标注的信息窗
1
企鹅：516840664可以帮你解决 百度地图API 基本任何问题。
2
// 编写自定义函数,创建标注 function addMarker(point, lable, Htmlname, myIcon) { //创建标注点 var marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker); //添加文字 var label = new BMap.Label(lable, { offset: new BMap.Size(-30, 22) }); marker.setLabel(label); //获取弹出窗体内容 var sContent = getInnerHtml(Htmlname); var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象 //添加点击标注点事件 marker.addEventListener("click", function () { window.marker = marker; this.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow document.getElementById('r-result').onload = function () { infoWindow.redraw(); } }); }
这个是我的代码，你先看看，有什么不懂的你再问
infoWindow.redraw();这一句很关键
0
for (var i = 0; i < titles.length; i++) {
(
function (x) {//关键
var longitude = longitudes[i];
var latitude = latitudes[i];
var hotelTitle = titles[i];
var coordinate = new BMap.Point(longitude, latitude);
var myIcon = new BMap.Icon("Mario.png", new BMap.Size(34, 34), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
// var marker = new BMap.Marker(coordinate);
var marker = new BMap.Marker(coordinate, {icon: myIcon}); //创建标注
var opts = {title: '<span style="font-size:14px;color:#0A8021">' + hotelTitle + '</span>'};
// 创建信息窗口对象，引号里可以书写任意的html语句。
var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'>"
+ "<b>地址:</b>" + addresses[i]
+ "</br><b>电话:</b>" + telephones[i]
+ "</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='http://yestehotel.com:8000/yst/'>详情>></a></div>", opts);
marker.addEventListener("mouseover", function () {
this.openInfoWindow(infoWindow);
// //图片加载完毕重绘infowindow
// document.getElementById('r-result').onload = function () {
// infoWindow.redraw();
// }
});
map.addOverlay(marker); //添加marker到地图上
})(i);
}
