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

出处： http://www.cnblogs.com/shiyix

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

posted on 2013-12-21 23:46 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/3485641.html

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

前端调用高德地图app、百度地图app
前端调用高德地图app.百度地图app 说明:这里只说明了前端如何调用app地图,没有代码,测试机上高德地图.百度地图.腾讯地图,都已经安装好了,如果没有安装,调起app地图会没有反应,至于如何验证手 ...
GPS坐标互转：WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
GPS坐标互转:WGS-84(GPS).GCJ-02(Google地图).BD-09(百度地图) WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块) GCJ-02:中 ...
腾讯地图转换成百度地图坐标
https://www.jianshu.com/p/0fe30fcd4ae7 一.各个坐标系的概况众所周知地球是一个不规则椭圆体,GIS中的坐标系定义由基准面和地图投影两组参数确定,而基准面的定义则 ...
android地图入门,android 百度地图入门01 (史上最详没有之一)
最近一直和百度地图打交道,写几篇博客记录一下吧,目前最新版是4.0的 ,之前我用的是3.7的, 就以4.0的为例说一下最基本的配置流程吧. 一.准备工作 1.申请一个百度地图开发者账户--地址:htt ...
c语言api获取百度地图,H5调用百度地图API获取地理位置
//获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...
用html制作百度地图,canvas实现百度地图个性化底图绘制
精华 node-canvas实现百度地图个性化底图绘制发布于 3 年前作者 lzxue 11783 次浏览来自技术原文转自 #node-canvas实现百度地图个性化底图绘制随着nodej ...
android 百度地图 itemizedoverlay,[008] 百度地图API之ItemizedOverlay的使用(Android) .
本篇文章主要介绍如何在百度地图上添加Overlay(即图层或覆盖物). Overlay简介 Overlay通常被译为"图层"或"覆盖物".那么对于地图而言,什么 ...
android 百度地图 itemizedoverlay,[008] 百度地图API之ItemizedOverlay的使用(Android)
本篇文章主要介绍如何在百度地图上添加Overlay(即图层或覆盖物). Overlay简介 Overlay通常被译为"图层"或"覆盖物".那么对于地图而言,什么 ...
腾讯地图api php经纬度转换地址,腾讯地图经纬度转换为百度地图经纬度
‍ 利用微信来获取用户当前的详细地址是非常方便的,但是利用微信获取到用户的经纬度转换为具体地址时,老是出现误差很大,因此,决心把腾讯地图经纬度转换城百度地图经纬度,然后再‍利用百度地图api来获取详细 ...

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

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

最新文章

热门文章