javascript 開發百度地圖
javascript 開發百度地圖
1、完成內容，依照不同業態類型（A,B,C,D,E），標註不同圖示（完成）
2、點選標註點分別彈出markerArr數組內的title，yetai等內容目前可以彈出標註點內容，但是永遠都是markerArr數組內的最後一條數據，請問應該怎樣才可以點擊標註點後彈出對應的標註點數組信息。
求大神指點，感激不盡，謝謝。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#allmap{height:100%}
</style>
<script type="text/javascript" src=>
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
var markerArr = [
{
title: "名称：北京超市（总部）",
point: "116.333405,39.974042",
address: "北京市海淀区",
tel: "010-88888888",
yetai:"Y"
},
{
title: "名称：超市发（双榆树店）",
point: "116.331637,39.973424",
address: "北京市海淀区北三环西路双榆树西里7号 ",
tel: "010-62640346",
yetai:"A"
},
{
title: "名称：超市发（科学城店）",
point: "116.324596,39.986931",
address: "海淀区中关村南路77号",
tel: "010-62551377",
yetai:"B"
},
{
title: "名称：超市发（魏公村店）",
point: "116.326296,39.960478",
address: "地址：北京市海淀区魏公村街1号2号楼底商临01",
tel: "010-88570042",
yetai:"C"
},
{
title: "名称：超市发（白颐路店）",
point: "116.33458,39.951854",
address: "地址：北京市海淀区中国气象局社区南区22号楼底商",
tel: "010-58995553",
yetai:"D"
},
{
title: "名称：超市发（上地店）",
point: "116.318805,40.03683",
address: "地址：上地信息路19-3号",
tel: "010-62971745",
yetai:"E"
},
{
title: "名称：超市发（xxxx店）",
point: "116.318805,40.03620",
address: "北京市海淀区北三环西路号 ",
tel: "010-62640346",
yetai:"A"
},
];
function map_init() {
// 创建地图实例
var map = new BMap.Map("allmap");
// 创建点坐标
var point = new BMap.Point(116.333405,39.974042);
// 初始化地图，设置中心点坐标和地图级别
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);
//第6步：向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
//存放标注点经纬度信息数组
var point = new Array();
//存放标注点对象数组
var marker = new Array();
var marker2 = new Array();
//设置允许信息窗发送消息
var opts = {enableMessage:true};
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[i] = new window.BMap.Point(p0,p1);
marker[i] = new window.BMap.Marker(point[i]);
var aIcon = new BMap.Icon("images/a.png", new BMap.Size(30,30));
var bIcon = new BMap.Icon("images/b.png", new BMap.Size(30,30));
var cIcon = new BMap.Icon("images/c.png", new BMap.Size(30,30));
var dIcon = new BMap.Icon("images/d.png", new BMap.Size(30,30));
var eIcon = new BMap.Icon("images/e.png", new BMap.Size(30,30));
var yIcon = new BMap.Icon("images/y.png", new BMap.Size(30,30));
if (markerArr[i].yetai=="A"){
marker[i] = new window.BMap.Marker(point[i],{icon:aIcon});
}else if(markerArr[i].yetai=="B"){
marker[i] = new window.BMap.Marker(point[i],{icon:bIcon});
}else if(markerArr[i].yetai=="C"){
marker[i] = new window.BMap.Marker(point[i],{icon:cIcon});
}else if(markerArr[i].yetai=="D"){
marker[i] = new window.BMap.Marker(point[i],{icon:dIcon});
}else if(markerArr[i].yetai=="E"){
marker[i] = new window.BMap.Marker(point[i],{icon:eIcon});
}else if(markerArr[i].yetai=="Y"){
marker[i] = new window.BMap.Marker(point[i],{icon:yIcon});
}
var content='<input onclick="on()" type="button" value="导航">' + markerArr[i].title;
var infoWindow = new BMap.InfoWindow(content,opts);
marker[i].addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
map.addOverlay(marker[i]);
}
}
//异步调用百度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>
