详解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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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中的使用情况
2015/11/05 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
简单了解python的一些位运算技巧
2019/07/13 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
super()与this()的区别
2016/01/17 面试题
致标枪运动员广播稿
2014/02/06 职场文书
档案信息化建设方案
2014/05/16 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
总经理岗位职责
2015/02/04 职场文书
2015年新学期寄语
2015/02/26 职场文书
2015年采购部工作总结
2015/04/23 职场文书
《秋思》教学反思
2016/02/23 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
Vue3中的Refs和Ref详情
2021/11/11 Vue.js