Bing Maps是微软公司推出的Bing服务中线上地图服务。
使用它,可以在网络浏览器中观察到世界上的每一个角落。它的原名叫做”MSN Virtual Earth”,在微软推出了 Windows Live 后它被改进后更名为Live Search Maps并整合到了 Windows Live 产品系列中。现在,它作为Bing搜索引擎的一部分提供,并于2009年12月3日发布了一个新的测试版本。 Bing Maps是微软公司推出的Bing服务中线上地图服务。使用它,可以在网络浏览器中观察到世界上的每一个角落。它的原名叫做“MSN Virtual Earth”,在微软推出了 Windows Live 后它被改进后更名为Live Search Maps并整合到了 Windows Live 产品系列中。现在,它作为Bing搜索引擎的一部分提供,并于2009年12月3日发布了一个新的测试版本。
一般功能
Bing Maps的工作原理类似Google Maps、Google Earth、Mapquest和Yahoo! Maps,可以逐级地改变地图的比例尺,并提供矢量地图和卫星地图这两种常见的显示模式。Live Search Maps中只有美国地区拥有最详尽的矢量地图和最清晰的卫星地图,其他地区的地图不是很详尽甚至是错误的。例如有些国家被误列为一个地区而非国家。同时,它也提供了驾车服务,不过仅限于北美地区。这些和上述的四种在线地图服务大同小异。
案例:
<script type="text/javascript"> //获取经纬度 var jingdu = document.getElementsByName('jingdu')[0].value; var weidu = document.getElementsByName('weidu')[0].value; var map = null; var searchManager = null; //显示地图 function getMap() { var bussiness = "train station"; map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Ai9T-Bz3s5G6XdBM4xgcF6IwVm73uOeRHTkybtHbIDVajr8CbsoEbrhq-oDov-LF'}); //自动加载事件 Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: reverseGeocodeRequest }); //Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest(bussiness) }); } //创建搜索 function createSearchManager() { map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map)); searchManager = map.getComponent('searchManager'); } //显示附近的业务 function reverseGeocodeRequest() { createSearchManager(); var userData = { name: 'Maps Test User', id: 'XYZ' }; map.setView({zoom: 10}); var request = { location: new Microsoft.Maps.Location(jingdu,weidu), callback: onReverseGeocodeSuccess, errorCallback: onReverseGeocodeFailed, userData: userData }; searchManager.reverseGeocode(request); } function onReverseGeocodeSuccess(result, userData) { if (result) { map.entities.clear(); var pushpin = new Microsoft.Maps.Pushpin(result.location, null); map.setView({ center: result.location, zoom: 10 }); map.entities.push(pushpin); } else { alert('no Location found, try panning map'); } } function onReverseGeocodeFailed(result, userData) { alert('Rev geocode failed'); } function createSearchManager() { map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map)); searchManager = map.getComponent('searchManager'); } //搜索内容 function searchRequest(business) { createSearchManager(); var what = business; var userData = { name: 'Maps Test User', id: 'XYZ' }; var where = 'boston, ma'; var request = { what: what, where: where, count: 10, startIndex: 0, bounds: map.getBounds(), callback: search_onSearchSuccess, errorCallback: search_onSearchFailure, userData: userData }; searchManager.search(request); } function search_onSearchSuccess(result, userData) { map.entities.clear(); var searchResults = result && result.searchResults; if (searchResults) { for (var i = 0; i < searchResults.length; i++) { search_createMapPin(searchResults[i]); } if (result.searchRegion && result.searchRegion.mapBounds) { map.setView({ bounds: result.searchRegion.mapBounds.locationRect }); } else { alert('No results returned, Please try after sometime.'); } } } function search_createMapPin(result) { if (result) { var pin = new Microsoft.Maps.Pushpin(result.location, null); Microsoft.Maps.Events.addHandler(pin, 'click', function () { search_showInfoBox(result) }); map.entities.push(pin); } } function search_showInfoBox(result) { if (currInfobox) { currInfobox.setOptions({ visible: true }); map.entities.remove(currInfobox); } currInfobox = new Microsoft.Maps.Infobox( result.location, { title: result.name, description: [result.address, result.city, result.state, result.country, result.phone].join(' '), showPointer: true, titleAction: null, titleClickHandler: null }); currInfobox.setOptions({ visible: true }); map.entities.push(currInfobox); } function search_onSearchFailure(result, userData) { alert('Search failed'); } //附近各种业务 $(document).on("click",".Span span",function(){ var date = $(this).attr("data-type"); var business1 = "train station"; var business2 = "school"; var business3 = "Supermarket"; if(date==1){ Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest(business1) }); } else if(date==2){ Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest(business2) }); }else{ Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest(business3) }); } }); $(function(){ $('.Span span').click(function(){ $('.Span span').removeClass('on'); $(this).addClass('on'); }); }); </script>特色功能
参考资料
效果图:https://yangfd.com/PRoperty-to-rent/586de479bd773203dbd7805a (此效果图仅为参考) 文档:https://www.bingmapsportal.com/ISDK/AjaxV7#SpatialDataServices (此文档为英文文档,需翻译后可看)
新闻热点
疑难解答