gpt4 book ai didi

bing-maps - Bing map 中带有信息框的多个图钉

转载 作者:行者123 更新时间:2023-12-02 23:34:49 26 4
gpt4 key购买 nike

我正在尝试使用单独的信息框添加多个图钉。这意味着每个图钉都会有自己的信息框,其中包含自己的信息。里面有一个循环

latlng = new Microsoft.Maps.Location(latitude[pointerCount], longtitue[pointerCount]);
MarkingLocation[pointerCount] = new Microsoft.Maps.Pushpin(latlng, {icon:"marker2.ico", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50)});

myInfobox = new Microsoft.Maps.Infobox(latlng, myinfoboxOption);

Microsoft.Maps.Events.addHandler(MarkingLocation[pointerCount], 'click', function() {myInfobox.setOptions({ visible:true });});
map.entities.push(MarkingLocation[pointerCount]);
map.entities.push(myInfobox);

问题是它只显示每个图钉的最后一个信息框。假设我在伦敦、法国、德国、美国有 4 个图钉。现在,无论我点击哪个图钉,它都只显示美国图钉上的美国信息框。请任何人都可以帮助我丢失的内容..............

还有一件事,任何人都可以展示在信息框中使用 htmlContent 的方法吗?我尝试过通过选项设置它,但它不起作用......

myinfoboxoption = {width:300, 
height: 100,
title: str_loc,
htmlContent: htmlc,
showPointer: false,

offset: new Microsoft.Maps.Point(-100,0)};

请帮忙......

最佳答案

这就是我实现多个信息框的方法:

<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
var pinInfoBox; //the pop up info box
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "YourKey";

function GetMap() {

map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});

// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);


for (var i = 0 ; i < 10; i++){
//add pushpins
var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180);
var pin = new Microsoft.Maps.Pushpin(latLon);
pin.Title = name;//usually title of the infobox
pin.Description = "blahblahblah, "+ i; //information you want to display in the infobox
pinLayer.push(pin); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}

map.entities.push(pinLayer);
map.entities.push(infoboxLayer);

}

function displayInfobox(e) {
pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
pinInfobox.setLocation(e.target.getLocation());
}

function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
</script>

<style>
#map { position: absolute; top: 20; left: 10; width: 700px; height: 500px; border:#555555 2px solid;}
</style>
</head>
<body onload="GetMap()">
<div id="map">
</div>
</body>

最后你会得到这样的结果: enter image description here

关于bing-maps - Bing map 中带有信息框的多个图钉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7663993/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com