【百度地图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文件。(注意这里的格式是网页文件的格式哦)
大家动手来粘贴一下。
<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>
注意,在这句话里,写上你查询到的坐标。
5、给标注加上信息窗口
在刚才代码的基础上,加上以下内容,就可以实现点击标注,弹出信息窗口的事件了。比如以下这个例子:
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.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】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍...
摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. -------------------------------------------------- ...
- 基于百度地图API在AI Studio上的卫星地图块图像处理与分类
基于百度地图API在AI Stduio上的瓦片地图块图像处理与分类 项目介绍 本项目基于百度地图API获取了不同的瓦片地图并进行合并等处理,可用于遥感和抽象地图的地图块的图像分类.分割.检测等数据的制 ...
- 百度地图API,自定义地图标注
本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节. 标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个 ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...
- HTML调用百度地图API,实现地图标注位置
HTML调用百度地图API,实现地图标注位置 一.说明 二.代码 总结 提示:以下是本篇文章正文内容,下面案例可供参考 一.说明 通过HTML调用百度地图API,在指定位置显示出地图,并且在目标位置标 ...
- python 实现对地图的点击_利用python和百度地图API实现数据地图标注的方法
如题,先上效果图: 主要分为两大步骤 使用python语句,通过百度地图API,对已知的地名抓取经纬度 使用百度地图API官网的html例程,修改数据部分,实现呈现效果 一.使用python语句,通过 ...
- 使用vue+腾讯地图API GL实现地图选房的功能
使用vue+腾讯地图API GL实现地图选房的功能 背景介绍 公司最近想做一个地图选房的功能,在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能 腾讯地图的官方文档.首先 ...
- 调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
- 解决网页百度地图API在UC浏览器上不兼容情况
百度地图api网页端使用UC浏览器开启鼠标滚轮放大缩小功能时候会出现页面滚动问题 在script中加入: document.onmousewheel=function (e) {e= e || win ...
最新文章
- 应用OpenCV进行图像旋转和平移
- python如何进入文件夹_python之文件的读写和文件目录以及文件夹的操作实现代码...
- pycharm+itk+vtk安装及测试程序运行
- OpenCV Laplace point/edge detection拉普拉斯点/边缘检测的实例(附完整代码)
- 参加JavaEE培训需要什么条件
- WordPress博客后台不能显示所有主题和无法编辑主题的问题的解决方法
- JavaFX 2.0示例介绍书
- 超文本css样式换行
- python 生成器装饰器_python: 生成器,装饰器以及列表推导式写法
- 红皮书--With语句及布尔型
- 海康摄像头b/s架构下的视频直播
- 简述神经元网络控制的作用和特点
- 数据解读 | 高考志愿慎重填,大学四年不留白
- 英语语法总结--形容词和副词
- OutMan——集合对象的内存管理、copy的介绍及使用
- Spring boot视频播放(解决MP4大文件无法播放),整合ffmpeg,用m3u8切片播放。
- html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
- Snipaste - 截图贴图软件
- SG函数和SG定理【详解】
- Spring:Webflux响应式编程