原文 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:;

    padding:;

    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:;

    padding:;

    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:;

    padding:;

    height:100%;

}

演示截图如下：

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

作者：十一_x

　　　　

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议

Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API的更多相关文章

  1. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  2. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  3. JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...

  4. 乐卡上海网点地图制作心得 | 百度地图API使用心得

    前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...

  5. 如何获取google地图、baidu百度地图的坐标

    google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...

  6. 百度地图插件（百度地图AK申请配置指南）

    百度地图AK申请配置指南     [LBS云] 百度地图AK申请配置指南 1. 该文档是详细版,图文并茂: 2. 该指南是针对browser-mobile-sever三种终端开发的申请与配置说明: 3 ...

  7. vue & 百度地图：使用百度地图

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. Android定位&地图&导航——基于百度地图移动获取位置和自动定位

    一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyAppl ...

  9. Android定位&地图&导航——基于百度地图实现的定位功能

    一.问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位.地图.导航等,首先我们看如何基于百度地图实现定位功能 二.配置环境 1.注册 ...

随机推荐

  1. tcpdump使用技巧

    tcpdump使用技巧 http://www.veryarm.com/1751.html

  2. 条款05：了解C++默默编写并调用哪些函数

    每一个class都会有一个或多个构造函数.一个析构函数.一个copy assignment操作符.这些控制着基础操作,像是产出新对象并确保它被初始化.摆脱旧对象并确保它被适当清理.以及赋予对象新值. ...

  3. JavaScript基础知识----六道有趣的Js基础题以及解答

    题目: 1.找出数字数组中最大的元素(使用Math.max函数)2.转化一个数字数组为function数组(每个function都弹出相应的数字)3.给object数组进行排序(排序条件是每个元素对象 ...

  4. Linux学习之查找命令find

    1.find  -name 根据名称查找文件 *通配所有字符: ?统配单个字符 2.find -iname 根据名称不区分大小写 3.find -size  根据文件大小 find / -size + ...

  5. C语言选择法排序

    #include <stdio.h> int main() { int i, j, p, n, q; ] = {, , , , }; //对无序数组进行排序 ; i<; i++) { ...

  6. Visual C++ 6.0编程环境的使用

    1.1 编制并运行程序的四部曲 (1)编辑(把程序代码输入,交给计算机). (2)编译(成目标程序文件.obj).编译就是把高级语言变成计算机可以识别的2进制语言,计算机只认识1和0,编译程序把人们熟 ...

  7. C++堆和栈的比较（7个区别）

    基础知识: 堆 栈是一种简单的数据结构,是一种只允许在其一端进行插入或删除的线性表.允许插入或删除操作的一端称为栈顶,另一端称为栈底,对堆栈的插入和删除操作被称 为入栈和出栈.有一组CPU指令可以实现 ...

  8. python 中函数参数传递形式

    python中函数参数的传递是通过赋值来传递的.函数参数的使用又有俩个方面值得注意:1.函数参数是如何定义的 2.在调用函数的过程中参数是如何被解析 先看第一个问题,在python中函数参数的定义主要 ...

  9. CUDA samples 第三章 sample reference 概况

    示例代码分为下列几类: 1.   Simple Reference 基础CUDA示例,适用于初学者, 反应了运用CUDA和CUDA runtime APIs的一些基本概念. 2.   Utilitie ...

  10. 1369 - Answering Queries（规律）

    1369 - Answering Queries   PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 32 M ...