百度地圖 迴圈載入marker並新增多個資訊視窗，解決只顯示最後一個視窗資訊的問題
阿新 • • 發佈：2019-02-12
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowNurseryInfo.aspx.cs"
Inherits="Bim5D_Web.Nursery.ShowNurseryInfo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F9d8685549a1026cb4b5fa6561ab8962"></script>
<script type="text/javascript" src="../Scripts/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<style>
.menu-text {
color: black;
font-weight: bold;
}
.baidu-maps label {
max-width: none;
}
body, html
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap
{
margin-right: 0px;
height: 96%;
overflow: hidden;
}
ul li {
margin-left: 50px;
}
</style>
<script>
$(function () {
initMarker("");
})
//單擊單個苗圃事件
function LoadPartial(id, systemid) {
initMarker(id);
}
//載入標註點
function initMarker(id) {
$.ajax({
type: "POST",
url: "Ashx/HandlerNurseryInfo.ashx",
dataType: "json",
async: false,
data: { "id": id },
success: function (data) {
map.clearOverlays();
var i = 0;
var points = [];
for (var item in data.nurseryInfo) {
(function (x) {
//建立標註
var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
points[i] = pt;
var marker = new BMap.Marker(pt);
map.addOverlay(marker);
var label = new BMap.Label(data.nurseryInfo[item].Name, { offset: new BMap.Size(30, -10) });
marker.setLabel(label);
label.setStyle({
color: "White",
fontSize: "14px",
backgroundColor: "#5CACEE",
border: "0"
});
//建立資訊視窗
var opts = {
width: 400, // 資訊視窗寬度
height: 120, // 資訊視窗高度
title: "<strong style=\"font-size:16px;font-weight:bold\">" + data.nurseryInfo[item].Name + "</strong>", // 資訊視窗標題
enableMessage: true, //設定允許資訊窗傳送短息
message: ""
}
var showInfo = "地址：" + data.nurseryInfo[item].Addresss + "<br/>" + "描述：" + data.nurseryInfo[item].BasicFacts + "<br/>面積：" + data.nurseryInfo[item].HouseArea + "<br/>地塊個數:" + data.nurseryInfo[item].nurseryBlockCount;
var infoWindow = new BMap.InfoWindow(showInfo, opts); // 建立資訊視窗物件
marker.addEventListener("click", function (e) {
//map.centerAndZoom(pt, 12);
marker.openInfoWindow(infoWindow, pt); //開啟資訊視窗
});
map.addOverlay(marker);
i++;
})(i);
}
if (id == "") {
map.setViewport(points);
} else {
map.setViewport(points);
setTimeout(function () {
map.setZoom(14);
}, 100); //0.1秒後放大到14級
}
},
error: function (error) {
alert("載入失敗，請檢查網路或其他原因");
}
});
}
//清除覆蓋物
function cleardd() {
for (var i = 0; i < overlays.length; i++) {
map.removeOverlay(overlays[i]);
}
overlays.length = 0;
}
</script>
<body style="height: 100%; margin: 0">
<%----表單--%>
<form id="form1" runat="server">
<input type="hidden" id="hdCityName" runat="server" />
</form>
<%----整體Div--%>
<div style="width: 100%; height: 100%;">
<%--內容--%>
<div id="Div3" style="width: 100%; height: 100%; float: left;">
<div id="Div4" style="width: 15%; height: 100%; float: left;">
<div style="width: 100%;height: 20%;">
<span style="font-size:22px;font-weight: bold">工作統計</span><br/>
<span style="font-size: 16px;line-height: 40px;">苗圃管理：<input class="form-control" readonly="readonly" id="txtNurseryManage" runat="server" style="width: 50%;display:inline;height: 25px;" />個</span><br/>
</div>
<div style="width: 100%;height: 5%;">
<span style="font-size:22px;font-weight: bold">苗圃列表</span>
</div>
<div style="width: 100%; height: 75%; float: left; ">
<%--苗圃列表--%>
<div class="page-sidebar" id="sidebar" style="overflow-y: auto;height: 600px;">
<ul class="nav sidebar-menu">
<%=Nursery%>
</ul>
</div>
</div>
</div>
<div id="allmap" style="width: 85%; height: 100%; float: left;" class="baidu-maps">
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map例項
map.centerAndZoom(new BMap.Point(116.659468, 40.137477), 12); // 初始化地圖,設定中心點座標和地圖級別
map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
</script>
</html>
Inherits="Bim5D_Web.Nursery.ShowNurseryInfo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F9d8685549a1026cb4b5fa6561ab8962"></script>
<script type="text/javascript" src="../Scripts/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<style>
.menu-text {
color: black;
font-weight: bold;
}
.baidu-maps label {
max-width: none;
}
body, html
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap
{
margin-right: 0px;
height: 96%;
overflow: hidden;
}
ul li {
margin-left: 50px;
}
</style>
<script>
$(function () {
initMarker("");
})
//單擊單個苗圃事件
function LoadPartial(id, systemid) {
initMarker(id);
}
//載入標註點
function initMarker(id) {
$.ajax({
type: "POST",
url: "Ashx/HandlerNurseryInfo.ashx",
dataType: "json",
async: false,
data: { "id": id },
success: function (data) {
map.clearOverlays();
var i = 0;
var points = [];
for (var item in data.nurseryInfo) {
(function (x) {
//建立標註
var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
points[i] = pt;
var marker = new BMap.Marker(pt);
map.addOverlay(marker);
var label = new BMap.Label(data.nurseryInfo[item].Name, { offset: new BMap.Size(30, -10) });
marker.setLabel(label);
label.setStyle({
color: "White",
fontSize: "14px",
backgroundColor: "#5CACEE",
border: "0"
});
//建立資訊視窗
var opts = {
width: 400, // 資訊視窗寬度
height: 120, // 資訊視窗高度
title: "<strong style=\"font-size:16px;font-weight:bold\">" + data.nurseryInfo[item].Name + "</strong>", // 資訊視窗標題
enableMessage: true, //設定允許資訊窗傳送短息
message: ""
}
var showInfo = "地址：" + data.nurseryInfo[item].Addresss + "<br/>" + "描述：" + data.nurseryInfo[item].BasicFacts + "<br/>面積：" + data.nurseryInfo[item].HouseArea + "<br/>地塊個數:" + data.nurseryInfo[item].nurseryBlockCount;
var infoWindow = new BMap.InfoWindow(showInfo, opts); // 建立資訊視窗物件
marker.addEventListener("click", function (e) {
//map.centerAndZoom(pt, 12);
marker.openInfoWindow(infoWindow, pt); //開啟資訊視窗
});
map.addOverlay(marker);
i++;
})(i);
}
if (id == "") {
map.setViewport(points);
} else {
map.setViewport(points);
setTimeout(function () {
map.setZoom(14);
}, 100); //0.1秒後放大到14級
}
},
error: function (error) {
alert("載入失敗，請檢查網路或其他原因");
}
});
}
//清除覆蓋物
function cleardd() {
for (var i = 0; i < overlays.length; i++) {
map.removeOverlay(overlays[i]);
}
overlays.length = 0;
}
</script>
<body style="height: 100%; margin: 0">
<%----表單--%>
<form id="form1" runat="server">
<input type="hidden" id="hdCityName" runat="server" />
</form>
<%----整體Div--%>
<div style="width: 100%; height: 100%;">
<%--內容--%>
<div id="Div3" style="width: 100%; height: 100%; float: left;">
<div id="Div4" style="width: 15%; height: 100%; float: left;">
<div style="width: 100%;height: 20%;">
<span style="font-size:22px;font-weight: bold">工作統計</span><br/>
<span style="font-size: 16px;line-height: 40px;">苗圃管理：<input class="form-control" readonly="readonly" id="txtNurseryManage" runat="server" style="width: 50%;display:inline;height: 25px;" />個</span><br/>
</div>
<div style="width: 100%;height: 5%;">
<span style="font-size:22px;font-weight: bold">苗圃列表</span>
</div>
<div style="width: 100%; height: 75%; float: left; ">
<%--苗圃列表--%>
<div class="page-sidebar" id="sidebar" style="overflow-y: auto;height: 600px;">
<ul class="nav sidebar-menu">
<%=Nursery%>
</ul>
</div>
</div>
</div>
<div id="allmap" style="width: 85%; height: 100%; float: left;" class="baidu-maps">
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map例項
map.centerAndZoom(new BMap.Point(116.659468, 40.137477), 12); // 初始化地圖,設定中心點座標和地圖級別
map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
</script>
</html>