我在JSON对象中有大约30个纬度和经度，我每次填充5个并创建HTML标记并在左侧DIV元素的浏览器中显示。在右侧DIV元素上，我显示的是具有所有可用纬度和经度（30点）的地图。
直到现在我正在设置一个特定的硬编码缩放级别来显示图钉。但我需要设置缩放级别，以便默认情况下只显示最少5个图钉（我从HTML标记获得的5个图钉LAT长）。在用户缩小时，他们应该能够看到所有可用的图钉。
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bing Maps - YUI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css"" />
<script type="text/javascript">
// Create a YUI sandbox on your page.
YUI().use('json-parse', 'json-stringify', "node", "selector-css3", "event-valuechange", "event", 'node-event-delegate', 'event-key', function (Y) {
Y.on('available', function () {
//alert("gh");
Y.one('#firststore').addClass('disableprev');
//e.preventDefault();
//Y.one('#firststore').addClass('successmsgdisplay12');
var data = JSON.stringify({ "stores": [
{ "storeId": "1", "Name": "Branch 1", "lat": "12.915397", "long": "77.624154", "address": "HSR Layout, Bengaluru 560102, India." },
{ "storeId": "2", "Name": "Branch 2", "lat": "12.936060", "long": "77.625506", "address": "Koramangala Ring Road, 4th Cross Road, Koramangala, Bengaluru 560034, India." },
{ "storeId": "3", "Name": "Branch 3", "lat": "12.936060", "long": "80.502330", "address": "Pilimathalawa Road, Menikdiwela, Sri Lanka." },
{ "storeId": "4", "Name": "Branch 4", "lat": "12.956805", "long": "77.700457", "address": "Varthur Main Road, Marattahalli, Bengaluru 560037, India." },
{ "storeId": "5", "Name": "Branch 5", "lat": "12.918325", "long": "77.573256", "address": "1 Kanakapura Main Road, Banashankari, Bengaluru 560050, India." },
{ "storeId": "6", "Name": "Branch 6", "lat": "12.920333", "long": "77.620291", "address": "321-2 Madwala Stage 1, BTM Layout, Bengaluru 560068, India." },
{ "storeId": "7", "Name": "Branch 7", "lat": "12.965170", "long": "77.619261", "address": "Old Airport Road, Neelasandra, Bengaluru 560071, India." },
{ "storeId": "8", "Name": "Branch 8", "lat": "13.095747", "long": "77.348184", "address": "Nelamangala Sub-District, Ka, India." },
{ "storeId": "9", "Name": "Branch 9", "lat": "12.918999", "long": "77.616942", "address": "273, BTM Layout, Bengaluru" },
{ "storeId": "10", "Name": "Branch 10", "lat": "12.932900", "long": "77.621835", "address": "Koramangala, Bengaluru" },
{ "storeId": "11", "Name": "Branch 11", "lat": "12.913922", "long": "77.622414", "address": "Bommanahalli, Bengaluru" },
{ "storeId": "12", "Name": "Branch 12", "lat": "12.915009", "long": "77.629581", "address": "L-55, HSR Layout, Bengaluru 560102, India." },
{ "storeId": "13", "Name": "Branch 13", "lat": "12.917373", "long": "77.622779", "address": "Silk Board Flyover, Koramangala, Bengaluru" },
{ "storeId": "14", "Name": "Branch 14", "lat": "12.916933", "long": "77.628487", "address": "100 Feet Ring Road, Koramangala, Bengaluru" },
{ "storeId": "15", "Name": "Branch 15", "lat": "12.918941", "long": "77.621642", "address": "Silk Board Flyover, Koramangala, Bengaluru 560034, India" },
{ "storeId": "16", "Name": "Branch 16", "lat": "12.916285", "long": "77.618015", "address": "100 Feet Ring Road, BTM Layout, Bengaluru 560029, India" },
{ "storeId": "17", "Name": "Branch 17", "lat": "12.919096", "long": "77.627409", "address": "Silk Board Flyover & Hosur Main Road, HSR Layout, Bengaluru 560102, India" },
{ "storeId": "18", "Name": "Branch 18", "lat": "12.915114", "long": "77.631169", "address": "L-115 3rd B Cross Road, HSR Layout, Bengaluru 560102, India" },
{ "storeId": "19", "Name": "Branch 19", "lat": "12.914549", "long": "77.615333", "address": "7/8 30th Main Road, BTM Layout, Bengaluru 560076, India" },
{ "storeId": "20", "Name": "Branch 20", "lat": "12.911391", "long": "77.633594", "address": "1089 19th Cross Road, HSR Layout, Bengaluru 560102, India" },
{ "storeId": "21", "Name": "Branch 21", "lat": "12.922601", "long": "77.622757", "address": "Madivala Market Road, Koramangala, Bengaluru 560034, India" },
{ "storeId": "22", "Name": "Branch 22", "lat": "12.924149", "long": "77.628808", "address": "Madivala Market Road & Sarjapur Road / Koramangala Road, Koramangala, Bengaluru 560034, India" }
]
});
Y.one("input[name='storeLatLong']").set("value", data);
try {
var val = Y.one("#storeLatLong").get("value");
var data = Y.JSON.parse(val);
}
catch (e) {
alert("Invalid product data");
}
var pins = data.stores;
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: "AkFmXSfNJbfsd3VIkd2R8AiIAYqO6fkrHpLC-4lTUvo3Lr920bQy9bLNCzbzXliz", mapTypeId: Microsoft.Maps.MapTypeId.road, showMapTypeSelector: false, customizeOverlays: true, showBreadcrumb: true, enableSearchLogo: false });
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { width: 200, height: 100, visible: false });
infoboxLayer.push(pinInfobox);
Y.Array.each(pins, function (pin, index) {
var pinLocation = new Microsoft.Maps.Location(pin.lat, pin.long);
var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { icon: 'images/Pushpin.png', width: 32, height: 32, text: pin.storeId, typeName: "pin" + index }); /*typeName: pin.Name*/
NewPin.Title = pin.address;
NewPin.ID = pin.Name;
NewPin.StoreID = pin.storeId;
Microsoft.Maps.Events.addHandler(NewPin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'click', hideInfobox);
map.entities.push(NewPin);
/*Title*/
Y.one('.pin' + index).setAttribute('title', pin.Name);
/*Title*/
});
map.entities.push(infoboxLayer);
map.setView({ center: new Microsoft.Maps.Location(data.stores[0].lat, data.stores[0].long), zoom: 15 });
var selectedPin;
function displayInfobox(e) {
if (e.targetType == 'pushpin') {
selectedPin = e.target;
map.setView({ center: e.target.getLocation(), zoom: 15 });
pinInfobox.setLocation(e.target.getLocation());
pinInfobox.setOptions({ visible: true, title: e.target.ID, description: e.target.Title });
var selectedPinNum = selectedPin._text;
selectListFromMap(selectedPinNum);
resetPinImage();
selectedPin.setOptions({ icon: 'images/Pushpin_Selected.png' });
return false;
}
}
function resetPinImage() {
for (var i = 0; i < map.entities.getLength(); i++) {
var elt = map.entities.get(i);
if (elt.StoreID != null) {
elt.setOptions({ icon: 'images/Pushpin.png' });
}
}
}
function selectListFromMap(sel) {
var isPinExist = false;
Y.one(".test").get('children').setAttribute("class", "nameslist");
Y.all(".nameslist").each(function (node) {
if (node.getAttribute("id") == "pin_" + (sel - 1)) {
node.setAttribute("class", "actives");
isPinExist = true;
return;
}
});
if (!isPinExist) {
var pinNum = sel - 1;
var range = pinNum % 5;
if (range > 0) {
counter = pinNum - range;
} else {
counter = pinNum;
}
var endPoint = counter + 4;
if (endPoint > data.stores.length) endPoint = data.stores.length - 1;
createMarkup(counter, endPoint);
selectListFromMap(sel);
}
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
createMarkup(0, 4);
function createMarkup(start, end) {
if (end > data.stores.length) {
end = data.stores.length;
}
var markup = "";
markup = "<ul class='test'>";
for (var i = start; i <= end; i++) {
var p = data.stores;
var classNme;
if (i == start) {
classNme = "actives";
setSelectedPinImage(i);
}
else {
classNme = "nameslist";
}
markup += "<li class=" + classNme + " id=pin_" + i + ">" + p[i].storeId + " " + p[i].Name + "</li>";
}
markup += "</ul>";
Y.one("#storeList").setHTML(markup);
Y.all(".nameslist").on("click", setSelectedCss);
Y.all(".actives").on("click", setSelectedCss);
Y.all(".nameslist").on("mouseover", setMouseoverCss);
Y.all(".nameslist").on("mouseout", setMouseoutCss);
Y.all(".actives").on("mouseover", setMouseoverCss);
Y.all(".actives").on("mouseout", setMouseoutCss);
//setMapZoom();
}
function setMouseoverCss(e) {
if (e._currentTarget.getAttribute("class") == "nameslist") {
e._currentTarget.setAttribute("class", "nameslisthover");
}
}
function setMouseoutCss(e) {
if (e._currentTarget.getAttribute("class") == "nameslisthover") {
e._currentTarget.setAttribute("class", "nameslist");
}
}
function setSelectedCss(e) {
Y.one(".test").get('children').setAttribute("class", "nameslist");
e._currentTarget.setAttribute("class", "actives");
var selectedPin = e._currentTarget.getAttribute("id").substring(4);
setSelectedPinImage(selectedPin);
hideInfobox();
map.setView({ center: new Microsoft.Maps.Location(data.stores[selectedPin].lat, data.stores[selectedPin].long), zoom: 15 });
}
function setSelectedPinImage(selectedPin) {
for (var i = 0; i < map.entities.getLength(); i++) {
var elt = map.entities.get(i);
if (elt.StoreID != null) {
if (Number(elt.StoreID) == Number(selectedPin) + 1) {
elt.setOptions({ icon: 'images/Pushpin_Selected.png' });
}
else {
elt.setOptions({ icon: 'images/Pushpin.png' });
}
}
}
}
var counter = 0;
Y.one("#prev").on("click", function (e) {
counter -= 5;
if (counter < 0) {
counter = 0;
Y.one('#firststore').addClass('disableprev');
Y.one('#firststore').removeClass('prevenabled');
e.preventDefault();
}
else {
Y.one('#firststore').removeClass('disableprev');
Y.one('#firststore').addClass('prevenabled');
}
createMarkup(counter, counter + 4);
var nextLoc = new Microsoft.Maps.Location(data.stores[counter].lat, data.stores[counter].long);
map.setView({ center: nextLoc, zoom: 15 });
hideInfobox();
e.preventDefault();
});
Y.one("#next").on("click", function (e) {
counter += 5;
var nextCounter = counter + 5;
var total = data.stores.length;
if (nextCounter > total) {
if (counter > total) counter -= 5;
nextCounter = total;
Y.one('#nextstore').removeClass('nextenabled');
Y.one('#nextstore').addClass('nextdisable');
e.preventDefault();
}
else {
Y.one('#nextstore').removeClass('nextdisable');
Y.one('#nextstore').addClass('nextenabled');
Y.one('#firststore').removeClass('disableprev');
Y.one('#firststore').addClass('prevenabled');
}
createMarkup(counter, nextCounter - 1);
var prevLoc = new Microsoft.Maps.Location(data.stores[counter].lat, data.stores[counter].long);
map.setView({ center: prevLoc, zoom: 15 });
hideInfobox();
e.preventDefault();
});
}, "#hiddenval");
});
</script>
</head>
<body>
<div>
<div id="storelists">
<div id="prev">
<input type="button" name="button" id="firststore" class="prevdisabled" />
</div>
<div id="storeList">
</div>
<div id="next">
<input type="button" name="button" id="nextstore" class="nextenabled" />
</div>
</div>
<div id="maplists">
<div id="mapDiv">
</div>
</div>
</div>
<div id="hiddenval">
<input type="hidden" name="storeLatLong" id="storeLatLong" value="" />
</div>
</body>
</html>
我的CSS是
body
{
background-color:#fff;
font-family:Arial;
font-size:12px;
}
#storelists
{
width:248px;
display:inline-block;
border:1px solid #999999;
height:306px;
}
#maplists
{
width:700px;
height:306px;
position:absolute;
display:inline-block;
border:1px solid #999999;
}
.test
{
list-style-type:none;
margin:0;
padding:0;
}
.nameslist
{
border-bottom:1px solid #f1f1f1;
background-color:#ffffff;
color:#3d6aae;
height:50px;
vertical-align:middle;
/*text-align: center;*/
}
.nameslisthover
{
background-color:#f0f0f0;
height:50px;
color:#3d6aae;
vertical-align:middle;
}
.actives
{
background-color:#de2a1e;
color:#ffffff;
height:50px;
vertical-align:middle;
}
.prevenabled
{
background: url("images/TopNavEnabled.PNG") no-repeat;
cursor:pointer;
border: none;
height:25px;
width:248px;
}
.prevdisabled
{
height:25px;
width:248px;
background:url("images/TopNavDisabled.PNG");
cursor:pointer;
border: none;
}
.nextenabled
{
height:25px;
width:248px;
background:url("images/BottomNavEnabled.PNG");
cursor:pointer;
border: none;
}
.nextdisable
{
height:25px;
width:248px;
background:url("images/BottomNavDisabled.PNG");
cursor:pointer;
border: none;
}
.successmsgdisplay
{
color: blue;
}
.successmsgdisplay12
{
color: Red;
}
.disableprev
{
color: #999999;
}
.enbableprev
{
color: green;
}
任何人请帮帮我。
答案 0 :(得分：3)
创建一个包含每个图钉的所有坐标的数组。将此数组传递给LocationRect对象。这将为图钉生成一个边界框。将其作为地图视图的边界框传递。例如：
var locs = [];
for(var i=0;i<data.length;i++){
locs.push(new Microsoft.Maps.Location(data.stores[i].lat, data.stores[i].long));
}
var bounds = Microsoft.Maps.LocationRect.fromLocations(locs);
map.setView({bounds:bounds, padding: 100});