天行健, 君子以自强不息
Sunny's Blog
Title

如何调用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.有一些必用的网站记录如下:

Bing map APIs

Getting Started with Bing Maps Doc

地势坤,君子以厚德载物