Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
原文 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，属于小白，基本不懂。直接显示这三家的地图，其中，操作高德地图时会有异常。
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API的更多相关文章
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...
- JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...
- 乐卡上海网点地图制作心得 | 百度地图API使用心得
前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...
- 如何获取google地图、baidu百度地图的坐标
google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...
- 百度地图插件（百度地图AK申请配置指南）
百度地图AK申请配置指南 [LBS云] 百度地图AK申请配置指南 1. 该文档是详细版,图文并茂: 2. 该指南是针对browser-mobile-sever三种终端开发的申请与配置说明: 3 ...
- vue & 百度地图：使用百度地图
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- Android定位&地图&导航——基于百度地图移动获取位置和自动定位
一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyAppl ...
- Android定位&地图&导航——基于百度地图实现的定位功能
一.问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位.地图.导航等,首先我们看如何基于百度地图实现定位功能 二.配置环境 1.注册 ...
随机推荐
- 取出js对象的所有属性的方式
例子: //取出事件的所有属性 $('#id_btn').bind("click dbclick mouseout",{crdx:'我是传的值'},function(e){ var ...
- python2.5_1.5_通过指定的端口和协议找到服务名
代码如下: # -*- coding: utf-8 -*- import socket def find_service_name(): protocolname = 'tcp' for port i ...
- Python之路Day16
主要内容:Django基础进阶之:Django 流程.Django URL.Django Views.Django Models.Django Template.Django Admin Django ...
- glib 文档 代码 索引 编译
./configure --prefix=/opt/glib-2.28.8 --enable-staticmakemake install linux下载 WIN32下载 代码索引 文档索引 GLib ...
- Visual Studio 2013 Xamarin for iOS 环境搭建
原文:Visual Studio 2013 Xamarin for iOS 环境搭建 一.Mac安装Xamarin.iOS 1,我的Mac 环境:OSX 10.10.3.Xcode 6.3.2 (使用 ...
- maven安装jar到本地仓库
class12.jar这个东西在中央仓库里没有,所以,cmd到oracle\product\10.2.0\db_1\jdbc\lib路径下,mvn install 就好了(发布第三方jar到本地库) ...
- IT第二十六天 - Swing、上周总结
IT第二十六天 上午 Swing 1.对于方法的参数如果是int数值类型,应该直接调用该类中的常量属性,而不应该直接填入数字 2.Toolkit类中定义的方法是可以直接访问本地计算机(操作系统)信息的 ...
- Poj 2092 Grandpa is Famous(基数排序)
题目链接:http://poj.org/problem?id=2092 思路分析:先统计数据,在根据Count降序排序,Count相等时按照Num升序排序:再输出Count第二大的所有Num: 代码如 ...
- 域用户允许更改IP地址
1.在DC上设置不好使. 2.需在本地用户组里添加到network.......组里. 注意:有的时候,连接不到DC上,是由于DNS的事,需要先去掉不必要的dns地址. 添加完后,需要重启或注销. 另 ...
- c++，类的组合
1. 在A类中以B类的对象作为成员变量,称为类的组合(composition). 可以先看看这篇文章理解组合的用处: C++中组合的使用 http://blog.csdn.net/jia_xiaoxi ...