详解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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python序列操作之进阶篇
2016/12/08 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python通过socketserver处理多个链接
2020/03/18 Python
python字符串的index和find的区别详解
2020/06/20 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
营销总监岗位职责
2014/09/16 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
施工员岗位职责范本
2015/04/11 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
会议主持人开场白台词
2015/05/28 职场文书
幸福来敲门观后感
2015/06/04 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
python异常中else的实例用法
2021/06/15 Python
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python