All geek questions in one place

Multiple Pushpin with info boxes in Bing Map

I am trying to add a few pushpin with separate info boxes. this means that each button will have its own info box with its own information. there is loop.inside that

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);

The problem is that it shows the latest infobox for each button only. Suppose I have 4 buttons in London, France, Germany, America. Now, no matter what contact I clicked, it shows only the American info box on America pushpin.please, can someone help that I'm missing .........

And one more thing: someone can show a way to use htmlContent in infoboxes. I tried to set its thrugh option, but that doesn’t bother ......

 myinfoboxoption = {width:300, height: 100, title: str_loc, htmlContent: htmlc, showPointer: false, offset: new Microsoft.Maps.Point(-100,0)};

Please, help........

+6
source share
3 answers

Here's how I implemented a few info boxes:

 <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>

At the end you will get something like this: enter image description here

+35
source

Correction: pin.title = "TITLE:" + i; // usually the header of the info box

0
source

I have an additional question. Does anyone know how to open info boxes by default, while all info boxes open at the same time? (they will be small, with one word in each, therefore they should not cause significant coincidences, especially when increasing)

Mostly I'm curious, if at all possible.

0
source

Source: https://habr.com/ru/post/898684/

More articles:


All Articles