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 產品系列中?,F在,它作為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 (此文檔為英文文檔,需翻譯后可看)
新聞熱點
疑難解答