开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【百度地图API】百度API卫星图使用方法和卫星图对比工具

简介: 原文:【百度地图API】百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~   本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具。   一、百度地图API卫星图 调用百度卫星图有两种方式,一是地图类型控件,一是地图底图设置。
+关注继续查看
原文:【百度地图API】百度API卫星图使用方法和卫星图对比工具

百度地图API推出卫星图接口也有一个月啦~  

本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具。

 

一、百度地图API卫星图

调用百度卫星图有两种方式,一是地图类型控件,一是地图底图设置。下面分别介绍这两种方法:

 

1、利用控件

使用控件有一大优势,就是地图类型控件上,有百度全部的地图类型,比如二维、三维、卫星等。

而且,只需要一句话,就能简单加上这个控件。

map.addControl(new BMap.MapTypeControl());          //添加地图类型控件

 

看到下图中,右上角那个控件了麽?这个就是地图类型控件啦~

添加她只需一句话,很简单吧。

 

全部源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>地图类型控件</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(116.4035,39.915);map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的,因为要使用三维图
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。

map.addControl(
new BMap.MapTypeControl()); //添加地图类型控件
</script>

 

 

 

更多关于地图类型控件的知识:(初学者可不看,上面的代码已经足够用啦~)


MapTypeControl是负责切换地图类型的控件,此类继承Control所有功能。


MapTypeControlOptions表示MapTypeControl构造函数的可选参数。它没有构造函数,但可通过对象字面量形式表示(自 1.2 新增)。

 

MapTypeControlType常量表示MapTypeControl的外观样式(自 1.2 新增)。

 

 

 


下面来看看第二种方法。如果你只需要卫星图,不需要别的地图类型,你就需要下面这种方法了。同样相当简单,也是一句话就搞定的事情~

2、修改地图底图默认设置

var map = new BMap.Map("container",{mapType: BMAP_HYBRID_MAP});      //设置卫星图为底图



 

 

二、卫星图对比工具

先来看图。下图中,左边是百度的卫星图,右边是谷歌的卫星图。

大家可以看到,无论是颜色,还是街道数据,都有明显的不同。

当然,如果你学会这些代码,你还可以将其他家API的卫星图拿来对比呀~~

 

对比工具主要是有以下功能:

1、同时展示百度和谷歌的卫星图

 // 百度卫星图底图
var bdMap = new BMap.Map("mapBaidu",{mapType: BMAP_HYBRID_MAP});


//谷歌卫星图底图
var ggMap = new google.maps.Map(document.getElementById("mapGoogle"),{mapTypeId: google.maps.MapTypeId.SATELLITE});



2、拖动谷歌地图,百度地图跟着动(联动效果)

给谷歌地图添加拖拽事件,同理,也可以给百度地图添加。

在这里取了近似值,没有使用坐标转换工具。如果使用的话,应该会更加准确的。(搜索线性转换,或者直接看源代码)

google.maps.event.addListener(ggMap, 'dragend', function() {        
blng = ggMap.center.lng() + 0.0065;
blat = ggMap.center.lat() + 0.0060;
bdMap.panTo(new BMap.Point(blng,blat));
});



3、放大缩小谷歌地图,百度地图也跟着放大和缩小

原理同上。谷歌的地图级别比百度小,所以要找一个地图级别的对应关系。大概是

google.maps.event.addListener(ggMap, 'zoom_changed', function() {        
bdMap.setZoom(ggMap.zoom+1);
});

 

 

 

全部源代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Map VS Baidu Map</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript">
function initialize() {
var blng;
var blat;
var myOptions = {
zoom:
14,
center:
new google.maps.LatLng(39.90564219683827,116.39948),
panControl:
false,
zoomControl:
false,
scaleControl:
false,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var ggMap = new google.maps.Map(document.getElementById("mapGoogle"),myOptions);

google.maps.event.addListener(ggMap,
'dragend', function() {
blng
= ggMap.center.lng() + 0.0065;
blat
= ggMap.center.lat() + 0.0060;
bdMap.panTo(
new BMap.Point(blng,blat));
});
google.maps.event.addListener(ggMap,
'zoom_changed', function() {
bdMap.setZoom(ggMap.zoom
+1);
});
}
</script>
</head>
<body onload="initialize()" style="width:100%;height:100%;">
<div id="mapBaidu" style="width:50%;height:100%;float:left;">
<script type="text/javascript">
var bdMap = new BMap.Map("mapBaidu",{mapType: BMAP_HYBRID_MAP}); // 创建Map实例
       var point = new BMap.Point(116.4035,39.915);map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的,因为要使用三维图

bdMap.centerAndZoom(point,
15); // 初始化地图,设置中心点坐标和地图级别。
bdMap.addControl(new BMap.MapTypeControl()); //添加卫星图控件
bdMap.enableScrollWheelZoom();
</script>
</div>
<div id="mapGoogle" style="width:50%;height:100%;float:left;"></div>
</body>
<script type="text/javascript">



</script>
</html>



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WEB音频API
本文转载至 http://www.webhek.com/web-audio-api 很偶然的,在一个微信公众号里面,看到了这样的一篇文章。 WEB音频API。作者分享技术的优良品质值得我们学习。
864 0
Web API路由
译者:jiankunking 出处:http://blog.csdn.net/jiankunking 原文地址 本文讲解ASP.NET Web API如何将HTTP请求路由至控制器。 如果你熟悉ASP.NET MVC,Web API路由与MVC路由非常相似。主要差别是Web API使用HTTP方法,而不是URI路径来选择Action。你也可以按照之前配置M
2194 0
Web APi之消息处理管道(五)
前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成。我们知道请求信息存在 RequestMessage 中,而响应信息则存在 ResponseMessage 中,当请求信息进入到管道中,此时HttpMessageHandler会对此进行相应的处理,当执行到控制器上的方法时此时就会进行响应,生成的响应信息HttpResponseMessage就会逆向通过HttpMessageHandler依次进行处理最终返回给客户端。
778 0
Web Api简单用法
ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器、移动设备等多种客户端的 Http 服务的新框架, ASP.NET Web API 也是构建 RESTful 服务的理想平台。
939 0
Web API 简单示例
原文:Web API 简单示例 一、RESTful和Web API   Representational State Transfer (REST) is a software architecture style consisting of guidelines and best practices for creating scalable web services.
982 0
****Web API 版本控制的几种方式
个人建议:用content type,即放在Header里面!比如加一个Version:1.4.3   这篇文章写得很好,介绍了三种实现web api版本化的三种方式。我从评论里又收集到两种方式,所以一共是5种: 方式一:利用URL   ? 1 2 HTTP GET: https://haveibeenpwned.
740 0
MVC4 WebAPI(一)
不管是因为什么原因,结果是在新出的MVC中,增加了WebAPI,用于提供REST风格的WebService,个人比较喜欢REST风格的WebService,感觉比SOAP要轻量级一些,而且对客户端的要求也更少,更符合网络数据传输的一般模式,客户端完全摆脱了代理和管道来直接和WebService进行交...
1089 0
Web API 版本控制的几种方式
http://www.troyhunt.com/2014/02/your-api-versioning-is-wrong-which-is.html 这篇文章写得很好,介绍了三种实现web api版本化的三种方式。
1172 0
小微企业阿里云最佳实践系列(四):云监控与 SLS 日志服务
概述 阅读对象 本博文主要写给创业团队、技术团队人数 < 5 人、没有专业运维等小微企业作为参考,需要掌握基础的服务器管理、软件开发等经验。 博文主要内容 本博文主要为大家介绍阿里云提供的基础云监控、日志服务两大产品,通过云监控与日志服务可以做到每天不需要时刻关注所开发的软件系统、服务器、数据库等健康状况就掌握异常情况,并能及时进行应急响应和处理。
1792 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载