问题
I've got the code to add multiple markers with infoboxes with Bing Maps API, currently using default pin markers. I know there's documentation on adding a custom marker but I'm looking to use a different custom image marker for each point. Managed to implement with Google Maps API but need to use Bing maps and stuck with this one. Any help appreciated, thanks!
<script>
var pinInfobox;
function GetMap() {
var pushpinInfos = [];
pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia' };
pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar' };
pushpinInfos[2] = { 'lat': 41.82328, 'lng': 20.962231, 'title': 'Another <a href="http://www.google.com">Kipper</a> Market', 'description': 'Kipper Gostivar' };
pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.com">Kipper</a> Gostivar' };
pushpinInfos[4] = { 'lat': 42.000900, 'lng': 21.466440, 'title': 'Market', 'description': 'Gostivar' };
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "<api_key>";
var 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);
var locs = [];
for (var i = 0 ; i < pushpinInfos.length; i++) {
locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
var pin = new Microsoft.Maps.Pushpin(locs[i]);
pin.Title = pushpinInfos[i].title;
pin.Description = pushpinInfos[i].description;
pinLayer.push(pin);
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
map.setView({ center: bestview.center, zoom: 10 });
}
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>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script><body onLoad="GetMap();">
<div id="map" style="position: relative; width: 600px; height: 450px;"></div>
</body>回答1:
You can specify icon path and other properties of push pin icon like below
var pin = new Microsoft.Maps.Pushpin(locs[i], {icon: 'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg', width:'20px', height: '20px'});
Check out the reference documentation for more options.
http://msdn.microsoft.com/en-us/library/gg427629.aspx
For random Icon for each location you can configure the icon path in your location variable var pushpinInfos = [];. See the sample code below
Icons I used in the below code is example only. You can create your own Icons and can place in your server and set path of it.
<script>
var pinInfobox;
function GetMap() {
var pushpinInfos = [];
pushpinInfos[0] = { 'lat': 42.0076215, 'lng': 20.9689308, 'title': 'Kipper Market', 'description': 'Braka Miladinovi 178, 1200 Tetovë, Tetovo, Macedonia', 'icon' :'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg' };
pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Azure-icon.png' };
pushpinInfos[2] = { 'lat': 41.82328, 'lng': 20.962231, 'title': 'Another <a href="http://www.google.com">Kipper</a> Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Outside-Chartreuse-icon.png' };
pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.com">Kipper</a> Gostivar', 'icon' :'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Marker-Inside-Chartreuse-icon.png' };
pushpinInfos[4] = { 'lat': 42.000900, 'lng': 21.466440, 'title': 'Market', 'description': 'Gostivar', 'icon' :'https://i-msdn.sec.s-msft.com/dynimg/IC488534.jpeg' };
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "<api_key>";
var 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);
var locs = [];
for (var i = 0 ; i < pushpinInfos.length; i++) {
locs[i] = new Microsoft.Maps.Location(pushpinInfos[i].lat, pushpinInfos[i].lng);
var pin = new Microsoft.Maps.Pushpin(locs[i], {icon: pushpinInfos[i].icon, width:'20px', height:'20px'});
pin.Title = pushpinInfos[i].title;
pin.Description = pushpinInfos[i].description;
pinLayer.push(pin);
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
map.setView({ center: bestview.center, zoom: 10 });
}
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>
来源：https://stackoverflow.com/questions/39494175/multiple-custom-markers-with-bing-maps-api