Hier ist ein Beispiel dafür, wie mit einer Reißzwecke zur Speicherung von Daten, die Metadaten-Eigenschaft verwenden und ein Click-Ereignis auf dem Reißzwecke hinzufügen, die eine Infobox öffnet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<script type='text/javascript'>
var map, infobox;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key'
});
//Create an infobox at the center of the map but don't show it.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
//Assign the infobox to a map instance.
infobox.setMap(map);
//Create a pushpin in the at a random location in the map bounds.
var randomLocation = Microsoft.Maps.TestDataGenerator.getLocations(1, map.getBounds());
var pin = new Microsoft.Maps.Pushpin(randomLocation);
//Store some metadata with the pushpin.
pin.metadata = {
title: 'Pin Title',
description: 'Pin discription'
};
//Add an click event handler to the pushpin.
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
//Add pushpin to the map.
map.entities.push(pin);
}
function pushpinClicked(e) {
//Make sure the infobox has metadata to display.
if (e.target.metadata) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
rbrundritt !! Ich möchte Infobox in Clustering-Karte öffnen Ich hatte diesen Code aber Problem angesprochen. Können Sie mir Code für offene Info-Box auf jedem Pin in Clustering-Karte mit HTML anpassbare Infobox geben. Ich muss mehrere Infoboxen auf jedem Pin setzen. –
Das Öffnen einer Infobox für geclusterte Pushpins ist der gleiche Vorgang wie das Öffnen einer Infobox für einen Standard-Pin. Der einzige Unterschied besteht darin, dass Sie im Callback-Handler zum Anpassen des Cluster-Pushpins Ihr Metadaten- und Click-Ereignis hinzufügen. Um den HTML-Code der Infobox anzupassen, können Sie dies in der pushpinClicked-Funktion tun. – rbrundritt