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="">Kipper</a> Market', 'description': 'Kipper Gostivar' };
pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="">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=".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>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.">Kipper</a> Market', 'description': 'Kipper Gostivar' };
pushpinInfos[3] = { 'lat': 41.80584, 'lng': 21.15498, 'title': 'Salmon Market', 'description': '<a href="http://www.google.">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/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>- have you tries the below answer? Please make update. Accept the answer if its working otherwise ment the issue you are getting again. Because this will help others who facing same problem. – Saji Commented Sep 22, 2016 at 4:01
1 Answer
Reset to default 7You 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./dynimg/IC488534.jpeg', width:'20px', height: '20px'});
Check out the reference documentation for more options.
http://msdn.microsoft./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./dynimg/IC488534.jpeg' };
pushpinInfos[1] = { 'lat': 41.799645, 'lng': 20.913514, 'title': 'Kipper Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive./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.">Kipper</a> Market', 'description': 'Kipper Gostivar', 'icon' :'http://icons.iconarchive./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.">Kipper</a> Gostivar', 'icon' :'http://icons.iconarchive./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./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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742332145a4423932.html
评论列表（0条）