【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
原文:【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
摘要：
在这篇文章中，你将学会，如何利用百度地图API进行标注。如何使用API新增的打车费用接口。
-------------------------------------------------------------------------------------------------------
哇，好久没有上来了。主要是因为最近工作繁忙，加上休息时间被各种排练、社团活动占满，导致木有更新此博客。
突然发现，【百度地图API】原来有了新变化！新增了打车费用的接口！
同时，坐标拾取工具也有了很大的变化！必须介绍一下啦~~
好！就让我们一起来看看吧~
-------------------------------------------------------------------------------------------------------
一、如何进行标注
1、首先，我们需要找准标注的位置。比如，我想标注“中央民族大学”附近的网球场。那么，我转到坐标拾取工具页面，请点击http://openapi.baidu.com/map/pick/index.html 。输入“中央民族大学”，点击查找按钮。
2、现在，地图上出现了很多中央民族大学附近的红色标注点。我将鼠标移到网球场上，就能看到我想要获取的地点的坐标。我就记下这个坐标。比如“116.330599,39.95536”。
3、坐标反查
如果，我已经有了一个从别的地方得到的坐标点，比如说“116.414597,39.955441”，而我不知道这是哪个地方的坐标。我可以把这个输入到地址框中，勾选反向查询，然后点击百度一下的按钮。地图上就会出现这个地点是在安定门。
坐标反查比较适合在得知坐标，而不知具体位置的时候使用。比如，你用GPS定位了一个点，你得到了这个点的经纬度，就可以利用坐标反查来获得这个点的地址。
从GPS坐标转换到百度地图坐标，需要咨询下百度api的客服：mapapi@baidu.com
4、建立网页文件
打开记事本，粘贴以下代码至记事本中，保存文件为map.htm文件。（注意这里的格式是网页文件的格式哦）
大家动手来粘贴一下。
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>酸奶小妹——百度地图API学习</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #milkMap{height:400px;width:600px;border:1px solid blue;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"> </script></head><body> <div id="milkMap"></div> <script type="text/javascript"> var map = new BMap.Map("milkMap"); // 创建地图实例 var point = new BMap.Point(116.330599,39.95536); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 </script></body></html>
注意，在这句话里，写上你查询到的坐标。
var point = new BMap.Point(116.330599,39.95536); // 创建点坐标
5、给标注加上信息窗口
在刚才代码的基础上，加上以下内容，就可以实现点击标注，弹出信息窗口的事件了。比如以下这个例子：
var infoWindow = new BMap.InfoWindow("<a target='_blank' href='http://www.ui-love.com/su/'><img title='粟摄影' alt='粟摄影' src='http://ui-love.com/static/img/subslogan.jpg' /></a>"); // 创建信息窗口对象marker.addEventListener("click", function(){ //给标注添加点击事件 this.openInfoWindow(infoWindow);});
你可以在信息窗口里放图片，文字，链接等等。任何html的东西都在信息窗口里面，从而完成整个标注的过程。
全部代码在此：
标注代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false">
</script>
</head>
<body>
<div id="milkMap"></div>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.330599,39.95536); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var infoWindow = new BMap.InfoWindow("<p><a target='_blank' title='粟摄影' alt='粟摄影' href='http://www.ui-love.com/su/'><img src='http://ui-love.com/static/img/subslogan.jpg' /></a></p><p style='font-size:12px;'>欢迎光临<b>粟摄影</b>的官方网站>></p><p style='font-size:12px;'>电话:010-8888 6666</p><p style='font-size:12px;'>地址:北京市海淀区XX门XX街道XXX村子</p>"); // 创建信息窗口对象
marker.addEventListener("click", function(){ //给标注添加点击事件
this.openInfoWindow(infoWindow);
});
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------
二、打车费用接口
举个例子来说明这个接口是如何使用的吧。比如，我要从安定门到王府井。
1、找到打车费用的接口
我先到API的官方网站，找到类参考的入口 http://openapi.baidu.com/map/classReference.html
打车查询是属于“服务类”，我就点击一下“服务”。然后就看到这样的页面。
调用该接口就可以可以啦~
说明：TaxiFare有白天和夜晚两种计算费用的方式。你还可以查询起步价、单价和总价。
taxiFare.day.totalFare //白天打车总价taxiFare.night.totalFare //夜间打车总价taxiFare.day.initialFare //白天的起步价taxiFare.day.unitFare //白天的单价taxiFare.night.initialFare //夜间的起步价taxiFare.night.unitFare //夜间的单价
完整的白天打车总价的例子如图，源代码在图的下方。
打车
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
驾车导航</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</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.centerAndZoom(new BMap.Point(116.404, 39.915), 14); //初始化地图
var driving = new BMap.DrivingRoute(map, {onSearchComplete:yyy,renderOptions:{map: map, autoViewport: true}});
driving.search("安定门", "王府井"); //驾车查询
function yyy(rs){
alert("从安定门到王府井打车总费用为："+rs.taxiFare.day.totalFare+"元"); //计算出白天的打车费用的总价
}
</script>
目前，打车费用支持的城市为：北京，上海，广州，深圳，成都、天津、杭州、武汉、苏州、南京、重庆、郑州、西安、济南、青岛、长沙。
自定义驾车的例子，请参考：http://www.cnblogs.com/milkmap/archive/2010/12/21/1912978.html
【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍的更多相关文章
- 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
- 【百度地图API】如何快速创建带有标注的地图？——快速创建地图工具+如何标注商家
原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
- 百度地图API，展示地图和添加控件
1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...
- 百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
- 如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 使用百度地图API进行Android地图应用开发（Eclipse）
随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...
- 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 百度地图API示例之小实践 添加代理商标注
地图坐标无非是经度纬度. 每个代理商都有他的经度纬度参数,就能够在地图上标注出来了. 效果如下: 功能包括 标记代理商 显示导航 显示距离 测量距离 点击选中等 其中测距用到的是自定义控件 地图根据城 ...
随机推荐
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- ARM装配说明MCR/MRC学习
MCR指令ARM数据寄存器传送到协处理器寄存器.假设协处理器不能成功运行操作.会产生未定义指令中止. 语法教学格式: MCR{<cond>} p15, 0, <Rd>, < ...
- MonkeyRunner源代码分析Android通信设备
正如前面<谁动了我的截图?--Monkeyrunner takeSnapshot方法源代码跟踪分析>所述,本文主要会尝试描写叙述android的自己主动化測试框架MonkeyRunner到 ...
- SharePoint 2010 Form Authentication (SQL) based on existing database
SharePoint 2010 表单认证,基于现有数据库的用户信息表 本文主要描写叙述本人配置过程中涉及到的步骤,仅作为參考,不要仅限于此步骤. 另外本文通俗易懂,适合大众口味儿. I. 开启并配置基 ...
- bsh for android : 北京
beanshell : bjtime.bsh source("/sdcard/com.googlecode.bshforandroid/extras/bsh/android.bsh" ...
- C语言，如何检查文件是否存在和权限的信息
按功能access,头文件io.h(linux通过使用unistd.h int access(const char *filename, int amode); amode參 ...
- Android中集成第三方库的方法和问题
Android中集成第三方库的方法和问题 声明: 1. 本文參考了网上同学们的现有成果,在此表示感谢,參考资料在文后有链接. 2. 本文的重点在第三部分,是在开发中遇到的问题及解决的方法.第一,第二部 ...
- struts.xml在Action配置具体解释
在博客上我已经基本上解释struts.xml基本配置.配置过程最为基本的是action的动态配置. 一.Action的创建方法 1)实现Action接口 2)继承ActionSupport类,覆写当中 ...
- GDI+学习笔记（六）渐变画笔
刷,顾名思义,它是一样的刷.提请设备,还记得常唱歌曲,"我是一个画家.." 好吧.跑题了. 本系列博客希望尽可能简单的描写叙述每项功能,而不希望把每一个參数都介绍的详具体细,假设须 ...
- JS封深入了解
1. javascript 语言理解闭包 js变量的范围分成两个:全局变量.局部变量.在全局变量的函数外声明变量,内部功能可以直接调用全局变量.声明变量里面的函数必须使用var 命令,否则,它里面的函 ...