【百度地图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>
【百度地图API】百度API卫星图使用方法和卫星图对比工具的更多相关文章
- 【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件
目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...
- 【转】【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件
[转][完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件 目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET ...
- C# 调用百度地图Web服务API
最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...
- C# 调用百度地图 Web 服务 API
最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...
- iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/
http://zanderzhang.gitcafe.io/2015/09/19/iOS-Andriod百度地图仿百度外卖-饿了么-选择我的地址-POI检索/ 百度外卖选择送货地址: 饿了么选择送货地 ...
- Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码
(从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...
- 微信小程序，天气预报（百度地图开放平台API）
小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml ...
- 百度地图地址解析(百度Geocoding API)
1.什么是Geocoding? Geocoding API 是一类简单的HTTP接口,用于提供从地址到经纬度坐标或者从经纬度坐标到地址的转换服务,用户可以使用C# .C++.Java等开发语言发送HT ...
- 百度地图js lite api 支持点聚合
百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer: http ...
随机推荐
- lua、groovy嵌入到java中的性能对比（转）
lua和groovy都是可以嵌入到java中的脚本语言.lua以高性能著称,与C/C++在游戏开放中有较多使用,groovy是一个基于Java虚拟机(JVM)的敏捷动态语言,在jvm下有着不错的性能. ...
- net搭建热插拔式web框架（沙箱的构建）
net搭建热插拔式web框架(沙箱的构建) 上周五写了一个实现原理篇,在评论中看到有朋友也遇到了我的问题,真的是有种他乡遇知己的感觉,整个系列我一定会坚持写完,并在最后把代码开源到git中.上一篇文章 ...
- 寒假了，想深入学习c++
本来在图书馆借了好几本属,但是,自己没有经验,借的书都太深奥,看不懂,哎,桑心!
- JAVA对数据库进行操作，实现数据库中数据的插入，查询，更改，删除操作
(—)通过mysql workbench 创建一个数据库,在这里命名为company,然后建一个tb_employee表 (二)以下是java代码对表tb_employee的操作 1 创建一个Empl ...
- Redis系列之（二）：Redis主从同步，读写分离（转）
1. Redis主从同步 Redis支持主从同步.数据可以从主服务器向任意数量的从服务器上同步,同步使用的是发布/订阅机制. 2. 配置主从同步 Mater Slave的模式,从Slave向Maste ...
- Android.mk中的经常使用语法
Android.mk编译文件是用来向Android NDK描写叙述你的C,C++源码文件的, 今天查了一些经常使用的的语法. 一 概述: 一个Android.mk文件用来向编译系统描写叙述你的源码. ...
- how tomcat works 札记(两)----------一个简单的servlet集装箱
app1 (看着眼前这章建议读者,看how tomcat works 札记(一个)----------一个简单的webserver http://blog.csdn.net/dlf123321/art ...
- ubuntu安装jdk eclipse mysql等
linux ubuntu下安装java web开发环境,需要安装包: jdk7 eclipse(选择java EE developer) apche-tomcat mysql(workbench可视化 ...
- Matlab中调用第三方Java代码
搞了一天,才算搞定. 第一步:定位Matlab中Java环境的ext目录 新建一个M script文件,或者直接在Matlab的交互式命令行中输入: disp(java.lang.System.get ...
- HDU 4123 Bob’s Race 树的直径+单调队列
题意: 给定n个点的带边权树Q个询问. 以下n-1行给出树 以下Q行每行一个数字表示询问. 首先求出dp[N] :dp[i]表示i点距离树上最远点的距离 询问u, 表示求出 dp 数组中最长的连续序列 ...