Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

简介: 原文 Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Win8。

原文 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,属于小白,基本不懂。直接显示这三家的地图,其中,操作高德地图时会有异常。 

 

 

作者: 十一_x
         
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议
目录
相关文章
|
25天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
26天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
17 4
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
33 0
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
83 2
vue.js项目评估流程图特效
|
1月前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
71 0
|
3天前
|
JavaScript
node.js输入项目目录结构并展示
node.js输入项目目录结构并展示
2 0
|
26天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为向后兼容版本,确保在旧环境运行。它在前端构建中不可或缺,提供语法转换、插件机制、灵活配置及丰富的生态系统,支持代码兼容性和自定义编译任务。**
17 6
|
1月前
|
JSON Java API
Springboot项目中如何设计一个规范的统一的Restful API 响应框架?
Springboot项目中如何设计一个规范的统一的Restful API 响应框架?
22 1
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!