【百度地图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 img_405b18b4b6584ae338e0f6ecaf736533.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 img_405b18b4b6584ae338e0f6ecaf736533.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

目录
相关文章
|
23天前
|
JSON API 数据格式
淘宝商品评论API接口,json数据示例参考
淘宝开放平台提供了多种API接口来获取商品评论数据,其中taobao.item.reviews.get是一个常用的接口,用于获取指定商品的评论信息。以下是关于该接口的详细介绍和使用方法:
|
3月前
|
JSON 数据挖掘 API
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。
|
3月前
|
JSON 数据挖掘 API
京东API接口最新指南:店铺所有商品接口的接入与使用
本文介绍京东店铺商品数据接口的应用与功能。通过该接口,商家可自动化获取店铺内所有商品的详细信息,包括基本信息、销售数据及库存状态等,为营销策略制定提供数据支持。此接口采用HTTP请求(GET/POST),需携带店铺ID和授权令牌等参数,返回JSON格式数据,便于解析处理。这对于电商运营、数据分析及竞品研究具有重要价值。
|
4月前
|
存储 供应链 监控
1688商品数据实战:API搜索接口开发与供应链分析应用
本文详细介绍了如何通过1688开放API实现商品数据的获取与应用,涵盖接入准备、签名流程、数据解析存储及商业化场景。开发者可完成智能选品、价格监控和供应商评级等功能,同时提供代码示例与问题解决方案,确保法律合规与数据安全。适合企业开发者快速构建供应链管理系统。
|
1月前
|
JSON 供应链 API
1688 买家订单,订单物流,订单回传接口系列(1688 寻源通 API)
1688寻源通API为开发者提供买家订单、订单物流及订单回传三大接口,助力企业实现订单管理、物流跟踪与信息反馈的自动化。买家订单接口可查询订单详情;订单物流接口支持实时跟踪物流状态;订单回传接口确保企业系统与平台数据同步。结合Python示例代码,企业可轻松集成这些功能,优化内部管理、提升客户体验并支持数据驱动决策。适用于电商订单管理、物流服务和数据分析等场景。
|
3月前
|
JSON API 开发者
京东API最新指南:商品视频接口接入与应用
在电商领域,商品视频能有效提升销售业绩。京东商品视频接口助力开发者获取商品视频信息(播放链接、时长、格式、封面图等),通过 HTTP GET/POST 请求返回 JSON 数据,便于集成到各类应用中,优化展示效果与用户体验。本指南详解接口接入与使用方法。
|
4月前
|
JSON API 开发者
1688 快递费用 API 接口的技术剖析与应用
1688快递费用API接口为企业和开发者提供自动化、高效化的快递费用查询服务,打破人工查询的繁琐局面。通过输入寄件与收件地址、商品重量、体积及选择快递公司等信息,接口精准计算费用并返回结果,支持中通、圆通等主流快递。输出内容包括快递费用、预估时效及附加费说明,助力电商精细化运营。Python示例代码展示了如何使用requests库发起POST请求并解析响应数据,实现费用查询自动化。
202 10
|
4月前
|
机器学习/深度学习 JSON 算法
淘宝拍立淘按图搜索API接口系列的应用与数据解析
淘宝拍立淘按图搜索API接口是阿里巴巴旗下淘宝平台提供的一项基于图像识别技术的创新服务。以下是对该接口系列的应用与数据解析的详细分析
|
4月前
|
存储 JSON API
淘宝商品详情API接口概述与JSON数据示例
淘宝商品详情API是淘宝开放平台提供的核心接口之一,为开发者提供了获取商品深度信息的能力。以下是技术细节和示例:
|
4月前
|
存储 缓存 监控
如何高效爬取天猫商品数据?官方API与非官方接口全解析
本文介绍两种天猫商品数据爬取方案:官方API和非官方接口。官方API合法合规,适合企业长期使用,需申请企业资质;非官方接口适合快速验证需求,但需应对反爬机制。详细内容涵盖开发步骤、Python实现示例、反爬策略、数据解析与存储、注意事项及扩展应用场景。推荐工具链包括Playwright、aiohttp、lxml等。如需进一步帮助,请联系作者。