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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5.  
  6. <!-- Google Maps API -->
  7. <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>
  8. </head>
  9. <body onload="initialize()">
  10. <div id="mapdisplay"></div>
  11. </body>
  12. </html>

2、googlemap.js

  1. var map;
  2.  
  3. function initialize() {
  4. map = new google.maps.Map(document.getElementById('mapdisplay'), {
  5. zoom: 3,
  6. center: new google.maps.LatLng(40, -187.3),
  7. mapTypeId: google.maps.MapTypeId.TERRAIN
  8. });
  9.  
  10. addMarkers();
  11. }
  12.  
  13. function addMarkers() {
  14. var latLong = new google.maps.LatLng(39.92, 116.46);
  15. var marker = new google.maps.Marker({
  16. position: latLong,
  17. map:map
  18. });
  19.  
  20. }

3、googlemap.css

  1. html,body,#mapdisplay {
  2. margin:;
  3. padding:;
  4. height:100%;
  5. }

使用高德地图Javascript API

1、amap.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <!-- 高德地图 API -->
  6. <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>
  7. </head>
  8. <body onload="initialize()">
  9. <div id="mapdisplay"></div>
  10. </body>
  11. </html>

2、amap.js

  1. function initialize() {
  2. var position = new AMap.LngLat(116.404, 39.915);//创建中心点坐标
  3. var mapObj = new AMap.Map("mapdisplay", { center: position });//创建地图实例
  4. }

3、amap.css

  1. html,body,#mapdisplay {
  2. margin:;
  3. padding:;
  4. height:100%;
  5. }

使用百度地图Javascript API
1、baidumap.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <!-- 百度地图API -->
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5b8e2845218f2f6a1f248068b0093496"></script>
  7. <!-- mapframe references -->
  8. <link href="/map.css" rel="stylesheet" />
  9. <script src="/baidumap.js"></script>
  10. </head>
  11. <body onload="initialize()">
  12. <div id="mapdisplay"></div>
  13. </body>
  14. </html>

2、baidumap.js

  1. function initialize() {
  2.  
  3. var map = new BMap.Map("mapdisplay"); // 创建Map实例
  4. var point = new BMap.Point(116.404, 39.915); // 创建点坐标
  5. map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
  6. map.enableScrollWheelZoom();
  7. }

3、baidumap.css

  1. html,body,#mapdisplay {
  2. margin:;
  3. padding:;
  4. height:100%;
  5. }

演示截图如下:

对于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. 【在网页中获取截图数据】Chrome和Firefox下的实战经验

    [转载自我在segmentfault的专栏:https://segmentfault.com/a/1190000004584071] 最近在实现一个功能,需求如下: 前提:当前页面无弹窗 页面任意位置 ...

  2. DevExpress ASP.NET 使用经验谈(3)-XPO对象的使用(使用指定数据连接)

    首先,我们贴出上一节Users类XPO对象的保存代码,直接建立的XPO Session会话,因为没有与我们所期望的数据层建立绑定, 所以程序自动创建了一个Access数据库,作为默认数据库操作对象来使 ...

  3. java线程池分析和应用

    比较 在前面的一些文章里,我们已经讨论了手工创建和管理线程.在实际应用中我们有的时候也会经常听到线程池这个概念.在这里,我们可以先针对手工创建管理线程和通过线程池来管理做一个比较.通常,我们如果手工创 ...

  4. 比赛F-F Perpetuum Mobile

    比赛F-F     Perpetuum Mobile 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=86640#problem/ ...

  5. new[] class deconstructor

    Class class(); Class *class1=new class; class1=&class; delete class1;   // Assert 指针指向的是一个栈中的对象, ...

  6. RSA, ACS5.X 集成配置

    目的是RSA和ACS集成,ACS作为RADIUS服务器提供二次验证服务. ①配置RSA SecurID Token Servers   按照如下网址配置: http://www.cisco.com/c ...

  7. uoj #2 【NOI2014】起床困难综合症 贪心+位运算

    题目链接 给出n个数, 每个数有特定的一种操作, &|^三种, 给出一个m, 初始值属于[0,m],选定一个初始值, 使所有操作做完之后的值最大, 输出这个最大值. 1, 从最高位贪心, 如果 ...

  8. [LeetCode]题解(python):024-Swap Nodes in Pairs

    题目来源: https://leetcode.com/problems/swap-nodes-in-pairs/ 题意分析: 给定一个链表,每两个相邻节点就行交换.比如1->2->3-&g ...

  9. ubuntu下vpn无反应的解决办法

    mv ~/.gconf  ~/.gcongbk0 sudo reboot

  10. LinuxC安装gcc

    使用centos进行C编程的时候使用gcc hello.c提示 bash:gcc:command not found 此时需要给Linux安装gcc命令如下 1 yum -y install gcc ...