带有Bing Maps API的多个自定义标记 [英] Multiple Custom Markers with Bing Maps API
本文介绍了带有Bing Maps API的多个自定义标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有使用Bing Maps API使用信息框添加多个标记的代码，当前使用默认的标记.我知道有添加自定义标记的文档，但是我希望为每个点使用不同的自定义图像标记.可以通过Google Maps API实施，但需要使用Bing地图，并且对此一无所知.任何帮助表示感谢，谢谢！
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>
推荐答案
您可以按如下所示指定图钉图标的图标路径和其他属性
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
对于每个位置的随机图标，您可以在位置变量var pushpinInfos = [];中配置图标路径.请参阅下面的示例代码
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>
这篇关于带有Bing Maps API的多个自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
