通过使用百度地图API显示多个地标信息,每个地标信息弹出的提示框内容都是最后一个地标信息的数据,为此,查找很多资料终于解决了此疑难杂症,现将方法整理如下:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>MapIndex</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
height: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
function message(obj, unitname, unittype, licenseid, address) {
var opts = {
width: 250,
height: 100,
title: unitname
}
var infoWindow = new BMap.InfoWindow("企业类型:" + unittype + "<br>" + "地址:" + address , opts); // 创建信息窗口对象
obj.openInfoWindow(infoWindow, map.getCenter());
}
function addMarker(point, marker, unitname, unittype, licenseid, address) { // 创建图标对象
map.addOverlay(marker);
marker.addEventListener("click", function () {
message(this, unitname, unittype, licenseid, address);
});
}
function InitMap() {
$.ajax({
type: 'GET',
url: 'GetCoordinates',
data: '',
success: function (data) {
//百度地图API方法,所有标注点弹出的提示框中的内容都是最后一个地标信息的内容
//for (var i = 0; i < data.length; i++) {
// var p = new BMap.Point(data[i].Longitude, data[i].Latitude); // 创建点坐标
// var m = new BMap.Marker(p); // 创建标注
// map.addOverlay(m); // 将标注添加到地图中
// var opts = {
// width: 250, // 信息窗口宽度
// height: 100, // 信息窗口高度
// title: "企业名称:" + data[i].UnitName, // 信息窗口标题
// }
// var infoWindow = new BMap.InfoWindow("企业类型:" + data[i].UnitType + "<br>" + "地址:" + data[i].Address, opts); // 创建信息窗口对象
// m.addEventListener("click", function () {
// map.openInfoWindow(infoWindow, p); //开启信息窗口
// });
//}
for (var i = 0; i < data.length; i++) {
var point = new BMap.Point(data[i].Longitude, data[i].Latitude); // 创建点坐标
var marker = new BMap.Marker(point); // 创建标注
addMarker(point, marker, data[i].UnitName, data[i].UnitType, data[i].Address);
}
},
error: function () {
},
dataType: "json"
});
}
var map = new BMap.Map("container"); // 创建地图实例
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var point = new BMap.Point(112.613712,35.088129); // 创建点坐标
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
InitMap();
</script>
</body>
</html>