如何调用bing地图
1.申请mapBingKey
2.引用地图包
v是版本,s=1应该是https协议
<script src="//ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1" ></script>
3.常用定位方法以及pushpin
initBingMap: function(currentFromIndex) {
var obj = [], latitude = null, longitude = null;
$.each($('.item-index'), function(index, item) {
latitude = $(item).data('latitude');
longitude = $(item).data('longitude');
obj.push( {'latitude': latitude, "longitude":longitude} );
});
var locationFlags = null,
pushpin = null,
locationArray = [];
bingMapOptions = {
credentials: mapBingKey(这个是要申请的),
enableClickableLogo: false,
enableSearchLogo: false,
mapTypeId: Microsoft.Maps.MapTypeId.road,
showCopyright: false,
showDashboard: true,
showMapTypeSelector: true,
customizeOverlays: true,
disableKeyboardInput: true
};
locationFlags = new Microsoft.Maps.EntityCollection();
$.each(obj, function(i, n) {
var location = new Microsoft.Maps.Location(n.latitude, n.longitude);
locationArray.push(location);
});
if (obj.length === 1) {
bingMapOptions.center = locationArray[0];
bingMapOptions.zoom = 12;
} else {
bingMapOptions.bounds = Microsoft.Maps.LocationRect.fromLocations(locationArray);
}
var bingMap = new Microsoft.Maps.Map($('.bingMap')[0],bingMapOptions);
var clickMapPushpin = function (e) {
bingMap.setView({ zoom: 16, center: new Microsoft.Maps.Location(e.latitude, e.longitude) });
//click event to do
}
$.each(obj, function(i, n) {
var location = new Microsoft.Maps.Location(n.latitude, n.longitude);
pushpin = new Microsoft.Maps.Pushpin(location, {
htmlContent: '<div class="bingLocation"><span class="bingIndex">'+(i + currentFromIndex).toString()+'</span><div class="send-to__svg"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape-mapPin-red"></use></svg></div></div>'
});
Microsoft.Maps.Events.addHandler(pushpin, 'click', clickMapPushpin.bind(this, {'latitude': n.latitude, 'longitude': n.longitude, 'index': i+currentFromIndex }));
bingMap.entities.push(pushpin);
});
}
4.有一些必用的网站记录如下: