zoukankan      html  css  js  c++  java
  • Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Win8。Win8 Store App可以直接支持javascript编写App,除了Bing,还没有发现用于Win8 Javascript项目上的sdk。

    新建一个空白的Win8 Store Javascript 项目,分别添加map.html、map.js、map.css三个文件。

    使用谷歌地图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);//创建中心点坐标  
        var mapObj = new AMap.Map("mapdisplay", { center: position });//创建地图实例  
    }

    3、amap.css

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

    使用百度地图Javascript API
    1、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>

    2、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();
    }

    3、baidumap.css

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


    演示截图如下:

    对于javascript,属于小白,基本不懂。直接显示这三家的地图,其中,操作高德地图时会有异常。 

  • 相关阅读:
    洛谷P3400 仓鼠窝(单调栈)
    牛客练习赛65
    2015 HIAST Collegiate Programming Contest] 题解(AK)
    “科林明伦杯”哈尔滨理工大学第十届程序设计竞赛(同步赛)
    POJ 2421 Constructing Roads
    逆序数&&线段树
    HDU-1166 敌兵布阵 (线段树&&树状数组入门)
    Codeforces Round #484 (Div. 2)
    HDU
    HDU 5773 The All-purpose Zero (变形LIS)
  • 原文地址:https://www.cnblogs.com/shiyix/p/3485604.html
Copyright © 2011-2022 走看看