Windows Store Javascript項目使用高德地圖、谷歌地圖、百度地圖API

時間 2019-12-02

標籤 windows store javascript 項目使用地圖谷歌百度 api 欄目 Windows 简体版

原文原文鏈接

原文 Windows Store Javascript項目使用高德地圖、谷歌地圖、百度地圖APIjavascript

在Win8 Store 項目中能夠使用的地圖主要有微軟的Bing Map，目前高德地圖sdk也支持Win8。Win8 Store App能夠直接支持javascript編寫App，除了Bing，尚未發現用於Win8 Javascript項目上的sdk。css

新建一個空白的Win8 Store Javascript 項目，分別添加map.html、map.js、map.css三個文件。html

使用谷歌地圖Javascript APIjava

一、googlemap.htmlweb

<!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>

二、googlemap.jsapi

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
    });

}

三、googlemap.csspost

html,body,#mapdisplay {
    margin:0;
    padding:0;
    height:100%;
}

使用高德地圖Javascript APIgoogle

一、amap.htmlurl

<!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>

二、amap.jsspa

function initialize() {
    var position = new AMap.LngLat(116.404, 39.915);//建立中心點座標  
    var mapObj = new AMap.Map("mapdisplay", { center: position });//建立地圖實例  
}

三、amap.css

html,body,#mapdisplay {
    margin:0;
    padding:0;
    height:100%;
}

使用百度地圖Javascript API
一、baidumap.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- 百度地圖API -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5b8e2845218f2f6a1f248068b0093496"></script>
    <!-- mapframe references -->
    <link href="/map.css" rel="stylesheet" />
    <script src="/baidumap.js"></script>
</head>
<body onload="initialize()">
    <div id="mapdisplay"></div>
</body>
</html>

二、baidumap.js

function initialize() {

    var map = new BMap.Map("mapdisplay");            // 建立Map實例
    var point = new BMap.Point(116.404, 39.915);    // 建立點座標
    map.centerAndZoom(point, 15);                     // 初始化地圖,設置中心點座標和地圖級別。
    map.enableScrollWheelZoom();
}

三、baidumap.css

html,body,#mapdisplay {
    margin:0;
    padding:0;
    height:100%;
}

演示截圖以下：

對於javascript，屬於小白，基本不懂。直接顯示這三家的地圖，其中，操做高德地圖時會有異常。

做者：十一_x

出處： http://www.cnblogs.com/shiyix

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。