详解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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jQuery autocomplete插件修改
Apr 17 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
简单实现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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
深入理解PHP中的global
2014/08/19 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
sails框架的学习指南
2014/12/22 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python requests post多层字典的方法
2018/12/27 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python实现猜拳小游戏
2020/04/05 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python程序 创建多线程过程详解
2019/09/23 Python
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
求职毕业生自荐书
2014/02/08 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
MySQL数据库表约束讲解
2022/06/21 MySQL