详解Javascript百度地图接口开发文档中的类和方法


Posted in Javascript onFebruary 07, 2017

JavaScript API v2.0介绍

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。

该套API免费对外开放。自v1.5版本起,您需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。

JavaScript API首家支持Https,如需要申请Https服务,请您认证企业信息,成为企业认证用户后,https将自动开通,同时获得更高的服务配额。

注意:仅JavaScript API

V2.0版本支持https,其他JavaScript API版本均不支持。使用https服务,请先检查您的版本以及配置注意事项。

调用API的基本文件格式

获取JavaScript API服务方法:

自JS APIv1.5之后,最新版本为2.0,您需要首先申请密钥(ak),才可成功加载API JS文件。

ak的使用方法如下:

<script src="http://api.map.baidu.com/api?v=2.0&ak"您的密钥" type="text/javascript">

其中参数v为API当前的版本号,目前最新版本为2.0。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。。

创建地图实例

var map = new

BMap.Map("container");

//创建点坐标

var point = newBMap.Point(104.045,30.559);

//地图初始化

map.centerAndZoom(point,15);

百度地图控件

向地图添加控件:

map.addControl(newBMap.NavigationControl());



//控件位置:

var opts = {offset: newBMap.Size(150, 5)}

map.addControl(newBMap.ScaleControl(opts));

//修改控件配置:

var opts = {type:BMAP_NAVIGATION_CONTROL_SMALL}

map.addControl(newBMap.NavigationControl(opts));

地图覆盖物

所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。

//创建标注:

var marker = newBMap.Marker(new BMap.Point(104.045,30.559));

//将标注添加到地图中:

map.addOverlay(marker);

地图信息窗口提示

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。您可以使用InfoWindow来创建一个信息窗实例,注意同一时刻地图上只能有一个信息窗口处于打开状态。

var opts = {

width : 250,//信息窗口宽度

height: 100,//信息窗口高度

title : "Hello"//信息窗口标题

}

var infoWindow = newBMap.InfoWindow("World", opts);//创建信息窗口对象

map.openInfoWindow(infoWindow,map.getCenter());//打开信息窗口

地图信息窗口提示(事件触发显示)

事件方法与Map事件机制相同。可参考事件部分

监听标注事件:

marker.addEventListener("click",function(){

alert("您点击了标注");

});

给标注添加点击事件:

marker.addEventListener("click",function(){

map.openInfoWindow(infoWindow,map.getCenter());

});

定位(浏览器定位)

Geolocation地图定位,返回用户当前的位置。此方法利用浏览器的geolocation接口获取用户当前位置,不支持的浏览器将无法获取。

创建Geolocation对象实例:

var geolocation = newBMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){ //判断状态

var mk = new BMap.Marker(r.point);//创建一个地图标注

map.addOverlay(mk);

map.panTo(r.point);//转向获取的地理坐标所在位置

alert('您的位置:'+r.point.lng+','+r.point.lat);

}

else {

alert('failed'+this.getStatus());

}

})

定位(IP定位)

LocalCity此类用于获取用户所在的城市位置信息。(根据用户IP自动定位到城市)

创建LocalCity对象实例:

myCity = new BMap.LocalCity();

myCity.get(function(e){

map.setCenter(e.name);

alert(e.name);

});

定位(经纬度定位)

点击获取经纬度实例:

map.addEventListener("click",function(e){

alert(e.point.lng + "," + e.point.lat);

});

根据经纬度定位实例:

var new_point = new BMap.Point(116.299689,40.1196618);

var marker = newBMap.Marker(new_point);//创建标注

map.addOverlay(marker);//将标注添加到地图中

map.panTo(new_point);

地址解析

var myGeo = newBMap.Geocoder();//创建地址解析器实例

//将地址解析结果显示在地图上,并调整地图视野

myGeo.getPoint("北京市昌平区回龙观地铁站", function(point){

if (point) {

map.centerAndZoom(point, 15);

map.addOverlay(new BMap.Marker(point)); //在地图上标注地理位置

}else{

alert("您选择地址没有解析到结果!");

}

}, "北京市");

逆地址解析

Geocoder类用于获取用户的地址解析

var geoc = newBMap.Geocoder();

map.addEventListener("click",function(e){

var pt = e.point; //点击位置的坐标点

geoc.getLocation(pt, function(rs){

var addComp = rs.addressComponents;

alert(addComp.province + ", " +addComp.city + ", " + addComp.district + ", " +addComp.street + ", " + addComp.streetNumber);

});

步行规划

WalkingRoute用于获取步行路线规划方案。创建一个步行导航实例。location表示检索区域,类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时,检索位置由当前地图中心点确定;当参数为坐标时,检索位置由该点所在位置确定;当参数为城市名称时,检索会在该城市内进行。

步行规划实例:

var walking = newBMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});

walking.search("天坛公园", "故宫");

获取步行导航的结果显示实例:

var walking = newBMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});

walking.search("天坛公园", "故宫");

驾车规划

DrivingRoute此类用于获取驾车路线规划方案

驾车线路规划实例:

var driving = newBMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});

driving.search("女子医院", "王府井广场");

公交检索

TransitRoute用于获取公交路线规划方案

公交检索实例:

var transit = newBMap.TransitRoute(map, {renderOptions: {map: map, panel:"r-result"}});

transit.search("中医大省医院", "明宇金融广场");

信息检索

LocalSearch用于位置检索、周边检索和范围检索

关键字检索实例:

var local = new BMap.LocalSearch(map,{

renderOptions:{map: map}

});

local.search("景点");

本地检索结果实例:

var local = newBMap.LocalSearch(map, {

renderOptions: {map: map, panel: "r-result"}

});

local.search("餐饮");

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
vue-router源码之history类的浅析
May 21 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
简单实现bootstrap导航效果
Feb 07 #Javascript
vue.js实现请求数据的方法示例
Feb 07 #Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 #Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 #Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 #Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 #Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 #Javascript
You might like
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python部署web开发程序的几种方法
2017/05/05 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python连接mongodb密码认证实例
2018/10/16 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
水电维修专业推荐信
2014/09/06 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015小学师德工作总结
2015/07/21 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电