Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
原文 Windows Store Javascript項(xiàng)目使用高德地圖、谷歌地圖、百度地圖API
在Win8 Store 項(xiàng)目中可以使用的地圖主要有微軟的Bing Map，目前高德地圖sdk也支持Win8。Win8 Store App可以直接支持javascript編寫App，除了Bing，還沒有發(fā)現(xiàn)用于Win8 Javascript項(xiàng)目上的sdk。
?
新建一個(gè)空白的Win8 Store Javascript 項(xiàng)目，分別添加map.html、map.js、map.css三個(gè)文件。
使用谷歌地圖Javascript API
1、googlemap.html
<!DOCTYPE html> <html> <head><title></title><!-- Google Maps API --><script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>???<!-- mapframe references -->
??? <link href="/googlemap.css" rel="stylesheet" />
??? <script src="/googleumap.js"></script> </head> <body onload="initialize()"><div id="mapdisplay"></div> </body> </html>
2、googlemap.js
var map;function initialize() {map = new google.maps.Map(document.getElementById('mapdisplay'), {zoom: 3,center: new google.maps.LatLng(40, -187.3),mapTypeId: google.maps.MapTypeId.TERRAIN});addMarkers(); }function addMarkers() {var latLong = new google.maps.LatLng(39.92, 116.46);var marker = new google.maps.Marker({position: latLong,map:map});}3、googlemap.css
html,body,#mapdisplay {margin:0;padding:0;height:100%; }
使用高德地圖Javascript API
1、amap.html
<!DOCTYPE html> <html> <head><title></title><!-- 高德地圖 API --><script src="http://webapi.amap.com/maps?v=1.2&key=711d692f3aa45f9241367087a49bc2a9" type="text/javascript"></script>??? <!-- mapframe references -->
??? <link href="/amap.css" rel="stylesheet" />
??? <script src="/amap.js"></script> </head> <body onload="initialize()"><div id="mapdisplay"></div> </body> </html>
2、amap.js
function initialize() {var position = new AMap.LngLat(116.404, 39.915);//創(chuàng)建中心點(diǎn)坐標(biāo) var mapObj = new AMap.Map("mapdisplay", { center: position });//創(chuàng)建地圖實(shí)例 }3、amap.css
html,body,#mapdisplay {margin:0;padding:0;height:100%; }使用百度地圖Javascript API
1、baidumap.html
2、baidumap.js
function initialize() {var map = new BMap.Map("mapdisplay"); // 創(chuàng)建Map實(shí)例var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point, 15); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。 map.enableScrollWheelZoom(); }3、baidumap.css
html,body,#mapdisplay {margin:0;padding:0;height:100%; }
演示截圖如下：
?
?
?
對(duì)于javascript，屬于小白，基本不懂。直接顯示這三家的地圖，其中，操作高德地圖時(shí)會(huì)有異常。?
?
?
作者：十一_x 出處： http://www.cnblogs.com/shiyix 本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。知識(shí)共享署名-非商業(yè)性使用-相同方式共享 2.5 中國(guó)大陸許可協(xié)議 posted on 2013-12-21 23:46 NET未來之路 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/3485641.html
總結(jié)
以上是生活随笔為你收集整理的Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一节 接口概述 [转贴]
- 下一篇： Parallels Desktop虚拟机