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

【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

简介: 原文:【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注。如何使用API新增的打车费用接口。 ------------------------------------------------------------------------------------------------------- 哇,好久没有上来了。
+关注继续查看
原文:【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

摘要:

在这篇文章中,你将学会,如何利用百度地图API进行标注。如何使用API新增的打车费用接口。

-------------------------------------------------------------------------------------------------------

哇,好久没有上来了。主要是因为最近工作繁忙,加上休息时间被各种排练、社团活动占满,导致木有更新此博客。

突然发现,【百度地图API】原来有了新变化!新增了打车费用的接口!

同时,坐标拾取工具也有了很大的变化!必须介绍一下啦~~

好!就让我们一起来看看吧~

-------------------------------------------------------------------------------------------------------

一、如何进行标注

1、首先,我们需要找准标注的位置。比如,我想标注“中央民族大学”附近的网球场。那么,我转到坐标拾取工具页面,请点击http://openapi.baidu.com/map/pick/index.html 。输入“中央民族大学”,点击查找按钮。

img_eac58c7d3555ffa4474b18f7036eced4.jpg

2、现在,地图上出现了很多中央民族大学附近的红色标注点。我将鼠标移到网球场上,就能看到我想要获取的地点的坐标。我就记下这个坐标。比如“116.330599,39.95536”。

img_8a0d1466c3df8dd0fc2fa84cac098465.jpg

3、坐标反查

如果,我已经有了一个从别的地方得到的坐标点,比如说“116.414597,39.955441”,而我不知道这是哪个地方的坐标。我可以把这个输入到地址框中,勾选反向查询,然后点击百度一下的按钮。地图上就会出现这个地点是在安定门。

坐标反查比较适合在得知坐标,而不知具体位置的时候使用。比如,你用GPS定位了一个点,你得到了这个点的经纬度,就可以利用坐标反查来获得这个点的地址。

从GPS坐标转换到百度地图坐标,需要咨询下百度api的客服:mapapi@baidu.com

img_a7f7eb04cded05bb129662d622f3daec.jpg

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的东西都在信息窗口里面,从而完成整个标注的过程。

img_7a1b644381537b2a686197f52c7d9f32.jpg

全部代码在此:

img_1c53668bcee393edac0d7b3b3daff1ae.gif标注代码
<!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); // 将标注添加到地图中
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 

打车查询是属于“服务类”,我就点击一下“服务”。然后就看到这样的页面。

img_22c7f40ac793d37236697e1d56421bb1.jpg

调用该接口就可以可以啦~

说明:TaxiFare有白天和夜晚两种计算费用的方式。你还可以查询起步价、单价和总价。

taxiFare.day.totalFare //白天打车总价
taxiFare.night.totalFare //夜间打车总价

taxiFare.day.initialFare
//白天的起步价
taxiFare.day.unitFare //白天的单价

taxiFare.night.initialFare
//夜间的起步价
taxiFare.night.unitFare //夜间的单价

完整的白天打车总价的例子如图,源代码在图的下方。

img_d0616c50983a99b176a8c0e606ce2130.jpg

img_1c53668bcee393edac0d7b3b3daff1ae.gif打车
<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?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

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

相关文章
S4HANA里至关重要的建模方式CDS view架构介绍
S4HANA里至关重要的建模方式CDS view架构介绍
29 0
S4HANA里至关重要的建模方式CDS view架构介绍
S4HANA里至关重要的建模方式CDS view架构介绍
41 0
S4HANA里至关重要的建模方式CDS view架构介绍
S4HANA里至关重要的建模方式CDS view架构介绍
72 0
S4HANA里至关重要的建模方式CDS view架构介绍
S4HANA里至关重要的建模方式CDS view架构介绍
61 0
bboss gradle工程导入eclipse介绍
bboss gradle工程导入eclipse介绍(本文适用于bboss所有模块和bboss平台) 环境准备: 在命令行执行以下指令(先安装好git工具并配置好环境变量) 下载bboss源码 假定源码存放目录d:/workspace/ cd d:/workspace git clone -b master --depth 1 https://github.
1018 0
GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
WGS-84:是国际标准,GPS坐标(Google Earth使用、或者GPS模块)GCJ-02:中国坐标偏移标准,Google Map、高德、腾讯使用BD-09:百度坐标偏移标准,Baidu Map使用//WGS-84 to GCJ-02GPS.
1268 0
安卓开发_慕课网_百度地图_添加覆盖物
学习内容来自“慕课网” 本片学习内容接自前四篇基础 安卓开发_慕课网_百度地图 安卓开发_慕课网_百度地图_实现定位 安卓开发_慕课网_百度地图_实现方向传感器 安卓开发_慕课网_百度地图_实现模式转换 请先学习前4篇再学习本篇,因为本篇在前四篇的基础上进行代码的编写   一、新建一个类用来存放数据(距离,点赞数,介绍图等信息) 1 package com.
883 0
bboss最佳实践gradle工程清单及其作用介绍
基于bboss开发项目说明 要做简单的demo,请参考文档 http://yin-bp.iteye.com/blog/1026261 正儿八经的做项目,参考文档搭bboss平台开发环境: http://yin-bp.
913 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载