前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Baidu与Google地图API初探

Baidu与Google地图API初探

作者头像
全栈程序员站长
发布于 2022-07-12 08:19:17
发布于 2022-07-12 08:19:17
1.8K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

前天周六,有个好友过来玩,他说想在他的站点中加入地图导航模块,但不知道选择哪个第三方Map API

在网上查了下Baidu、Google、QQ和MapBar等4种Map API(都是採用JS开放API),也查看了它们的SDK开发文档,谈谈自己的体会

Map API文档

BMap API(Baidu)与google.maps API(Google)文档相对最完备、详尽、简洁,而且给出了非常多学习演示样例,非常适合刚開始学习的人入门学习、应用开发

QMap API(QQ)与MapBar API(MapBar)文档尽管也比較完备,但演示样例与代码分开了,不能非常好所见即所得的体现代码与效果相关性

Map 功能推荐

BMap API和Google.maps API,应该就能够满足绝大部分需求

就易用性和色彩柔和性,推荐BMap API(Baidu)

就精确性和世界地图,推荐Google.maps API(Google)

精确性:

Baidu BMap提供小数点后六位的精度,如:天安门(116.397128, 39.916527);

Google google.maps则提供小数点后14位的精度,如:纽约(40.69847032728747, -73.9514422416687)

世界性:

Baidu BMap仅提供中国区域,也包括港、澳,但眼下还不包括台湾(可能百度日本分公司的地图中含有台湾);

Google google.maps则提供全球区域的地图(支持本地化语言)

3D效果:

Baidu BMap眼下仅提供中国几个大城市3D地图(如北、上、广和深圳)

Google google.maps则支持大部分国家的车载导航3D地图(在中国仅支持部分城市,如上海)

API风格:

BMap API和google.maps的API接口略有不同,BMap模块化分层设计更加独立;两者的API风格,能够代表其他几款开放的Map API风格

QMap API与google.maps API接口的风格非常相似,MapBar API与BMap API接口风格则非常雷同,甚至有些函数接口名都同样,如centerAndZoom

兼容性:

上面四款地图API,都採用js实现訪问调用,因此对浏览器兼容性非常重要

BMap API:支持IE6.0+、Chrome、FF 3.0+、Opera 9.0+、Safari 3.0+,以及国内主要浏览器,如遨游、360、QQ、Baidu、世界之窗等浏览器,兼容性较好

google.maps API:支持W3C标准(官方没明白给出兼容的相关浏览器),且在在支持定位功能的浏览器上,能够调用google Geolocation API(智能手机上应用广泛)

注:据了解,google map今年还暂未拿到在中国大陆的经营许可证,因此其地图訪问服务有时会被GFW屏蔽掉,甚至不可用

简单对照

BMap API(Baidu)和google.maps API(Google)——都是以“天安门”为參照系原点

BMap API(Baidu)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!doctype html>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>Baidu Map V1.2</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true">
	    <!-- add baidu map api -->
    </script>
</head>
<body>
    <div id="container" style="width: 600px; height: 400px;">
    </div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("container");            	    // new Map
    var point = new BMap.Point(116.397128, 39.916527);      // Location, (经度, 纬度)
    map.centerAndZoom(point, 15);                   	    // show Map

    // 加入�缩放功能
    map.enableScrollWheelZoom();
    map.enableKeyboard();
</script>

效果图例如以下:

google.maps API(Google)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!doctype html>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=gbk" />
    <title>Google Map V3</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.google.com/maps/api/js?sensor=false">
	<!-- add google map api -->
    </script>
</head>
<body onload="initialize()">
    <div id="container" style="width: 600px; height: 400px;">
    </div>
</body>
</html>
<script type="text/javascript">
    function initialize() {
        var point = new google.maps.LatLng(39.916527, 116.397128); 	          // location, (纬度, 经度)
        var option = {
            zoom: 12,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var obj = document.getElementById("container");                       // container
        var map = new google.maps.Map(obj, option); 			              // show map
    }
</script>

效果图例如以下:

另两大巨头的Map API(Bing与Yahoo!)

Bing Map API基于Virtual Earth的API,js接口调用,眼下仅仅有英文版(暂没找到中文版)

Yahoo! Map API提供Flash, Ajax and Map Image APIs,js接口调用,眼下也仅仅有英文版(暂没找到中文版)

注:Yahoo! Map API 看到,好像其要在2011年9月13号关闭Map API服务,建议用户转到其合作伙伴Ovi Maps API(Nokia)

We are shutting down this service on September 13, 2011. We suggest using maps from our partner Nokia. Please visit the Ovi Maps API for more information.

背后的故事

MapBar国内地图提供商,早期与百度合作,BMap API採用的便是MapBar,因此它们的API接口有些雷同(上面我已举例)

MapABC国内地图提供商,早期与Google合作,google.maps API起初採用MapABC,后来google做的更好、更灵活

51Map: 国内地图提供商,特色服务是提供地图下载,能够实现本地桌面地图(相似手机上的凯立德3D地图)

整体感觉,各家Map API各有千秋,BMap API和google.maps API从开放、维护等角度,代表Map API两大主流,能够满足绝大部分用户需求

QMap API和MapBar API都是后起之秀,专注技术的同一时候,也能够优化、添加�一些API文档,毕竟开放API就是为了让很多其他的人去使用嘛

IT技术须要竞争,由于竞争,所以创新;由于创新,所以开放;由于开放,所以进步,祝愿中国IT领域不断创新、开放、进步、超越

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/118808.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年12月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
百度地图api根据坐标搜索附近信息_最简单app制作
  这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的。只要简单几步注册下,就可以获得一个Key,就能直接调用(PS:好像1.3版本前的无需注册获取key,就能直接调用api)。   想着能结合到自己的项目中去,那也挺不错的。看了园子中的几篇文章,感觉甚好,想自己也动手试试。 在调用百度地图API的时候,经纬度的获取必然是关键,那么怎么样获取到经纬度的值呢?这是一个最首要解决的问题。 通过查询资料,看了几个例子,得知了调用的方法(感谢与时俱进的实例,给予很大的帮助)。站着巨人的肩膀上,就能比较快的实现功能。   闲话不多,下面就直接给大家介绍下,具体要怎么调用百度地图API。   首先新建一张html页面。然后引用上API:
全栈程序员站长
2022/09/20
9790
百度地图api根据坐标搜索附近信息_最简单app制作
百度地图api
要先进行注册账号和申请密钥(ak)才可使用该服务,接口无使用次数限制,请放心使用
JokerDJ
2023/11/27
3080
百度地图api
vue接入腾讯地图(一)【点击事件】
在https://lbs.qq.com/guides/startup.html申请一个key
腾讯位置服务
2020/09/04
3.5K0
百度地图API开发指南(一)
百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用。百度地图API包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。
幽鸿
2020/04/01
1.9K0
百度地图API开发指南(一)
百度地图API的使用示例
刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用。百度地图API,集成简单好用,全面,兼容问题,文档全面;
王小婷
2018/08/10
1.3K0
百度地图API的使用示例
Django调用百度地图api在地图上批量增加标记点
在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区。根据需求坐标在地图上添加若干个标记点,并批量的为各个标记点设置监听函数,使之显示我们所需要的信息
earthchen
2020/09/24
1.5K0
百度地图BMap API的应用实例
前几天,帮朋友做了几款地图API接口调研,推荐他使用百度BMap和谷歌GMap API,后来又直接交由我来替他做
阳光岛主
2019/02/19
1.9K0
百度地图API显示多个标注点带百度样式信息检索窗口的代码
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/113841.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/07
5950
百度地图上,路线轨迹的3D动画展示
效果展示 http://mpvideo.qpic.cn/0bf2v4aauaaa2aaeoxeiobpfbl6dbkxqacqa.f10002.mp4?dis_k=86dfca79527145d2c6
double
2020/05/08
3.4K1
使用百度地图——入门
大家好,又见面了,我是全栈君。 创建一个地图对象   创建一个新点   初始化地图,设置中心坐标和地图级别   配置地图的其他特点:加入变焦控制、启用鼠标滚轮缩放功能 创建覆盖物对象   创建标注对象   设置标注的标题   加入对象属性   给标注加入事件监听函数   将标注加入到地图中 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="com.telewave.systemejb.entity.SysUser"%> <%@
全栈程序员站长
2022/01/18
5430
使用百度地图——入门
python调用百度地图API实现热力图
登录百度地图开放平台 ,滚动到页面最底部,点击申请密匙,填写个人电话,邮箱等信息,注册后,登录邮箱点击激活链接,这时浏览器显示“##完成激活!”字样。
用户6808043
2022/02/25
2.2K0
百度地图API开发指南(三)
首先您需要定义自定义覆盖物的构造函数,在下面的示例中我们定义一个名为SquareOverlay的构造函数,它包含中心点和边长两个参数,用来在地图上创建一个方形覆盖物。
幽鸿
2020/04/01
1.9K0
百度地图API开发指南(三)
10分钟动手制作一个疫情小区防疫地图
最近有几个小程序可以查询你周边小区新型冠状病毒的确诊人数情况,通过这个小程序你可以看到你周围疫情的情况,具体如下图所示:
博文视点Broadview
2020/06/12
1.7K0
10分钟动手制作一个疫情小区防疫地图
百度API的经历,怎样为多个点添加带检索功能的信息窗口
不管我们要做什么样的效果,APIKey(密钥)都是不可缺少的要件,所以我们需要先去百度申请我们的APIKey!!!
Yiiven
2022/12/15
1.3K0
在地图上绘制路线图
最近做个项目,官方给了车的一些经纬度数据,为了看的更清楚,需要把数据标注在地图上 想到了两套方案,第一种采用python的folium库 结果遇到问题,数据一多,绘画出来的速度很慢,而且它的某JS插件还有问题,可能要访问国外网站 最后采用百度地图API+前端实现
zstar
2022/06/14
8660
在地图上绘制路线图
angularJs集成百度地图
app.controller('mapSignController',function($scope,$rootScope,Message, $window,$uibModalInstance){
JQ实验室
2022/02/09
3560
js 百度地图
http://api.map.baidu.com/lbsapi/creatmap/
WindWant
2020/09/11
2.4K0
js 百度地图
百度地图API-创建多个坐标,连线,信息提示
这是一个多坐标创建,并连线,和信息显示的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allm
用户1149182
2020/06/19
1.9K0
百度地图API-创建多个坐标,连线,信息提示
Vue.js下引入百度地图jsApi的两种方法
这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们在已经加载api的页面的任何地方,使用百度地图的api。但是单单通过引入的方法,对于使用单文件组件的vue+webpack开发的项目,显然是不够的。于是,通过网上查资料。这里找到了两种方法。
Javanx
2019/12/10
5.2K0
js 调用百度地图,并且定位用户地址,显示省市区街,经纬度
网上的一些百度地图例子,基本上没有连套的 定位 例子。下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! 1 <!DOCTYPE html> 2 <html> 3 <head>
林冠宏-指尖下的幽灵
2018/01/02
4K1
相关推荐
百度地图api根据坐标搜索附近信息_最简单app制作
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文