• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 详解Javascript百度地图接口开发文档中的类和方法

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

作者:ydxred 字体:[增加 减小] 来源:互联网 时间:2017-05-11

ydxred通过本文主要向大家介绍了javascript详解,javascript详解pdf,javascript接口,javascript百度百科,javascript百度云等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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">
</div>

其中参数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);
</div>

百度地图控件

向地图添加控件:

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));
</div>

地图覆盖物

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

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

//创建标注:

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

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

map.addOverlay(marker);
</div>

地图信息窗口提示

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

var opts = {

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

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

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

}

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

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

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

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

监听标注事件:

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

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

});
</div>

给标注添加点击事件:

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

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

});
</div>

定位(浏览器定位)

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());

}

})
</div>

定位(IP定位)

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

创建LocalCity对象实例:

myCity = new BMap.LocalCity();

myCity.get(function(e){

map.setCenter(e.name);

alert(e.name);

});
</div>

定位(经纬度定位)

点击获取经纬度实例:

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

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

});
</div>

根据经纬度定位实例:

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

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

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

map.panTo(new_point);
</div>

地址解析

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

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

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

if (point) {

map.centerAndZoom(point, 15);

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

}else{

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

}

}, "北京市");
</div>

逆地址解析

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);

});
</div>

步行规划

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("天坛公园", "故宫");
</div>

驾车规划

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

驾车线路规划实例:

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

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

公交检索

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

公交检索实例:

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • javascript 中的继承实例详解
  • JavaScript函数表达式详解及实例
  • JavaScript中双向数据绑定详解
  • JavaScript错误处理和堆栈追踪详解
  • JavaScript数据结构之广义表的定义与表示方法详解
  • JavaScript队列的应用实例详解【经典数据结构】
  • javascript编程实现栈的方法详解【经典数据结构】
  • javascript防篡改对象实例详解
  • 基于javascript的异步编程实例详解
  • JavaScript中的遍历详解(多种遍历)

相关文章

  • 2017-05-11js获取当前周、上一周、下一周日期
  • 2017-05-11nodejs搭建本地服务器并访问文件的方法
  • 2017-05-11js实现兼容PC端和移动端滑块拖动选择数字效果
  • 2017-05-11Vue常用指令V-model用法
  • 2017-05-11angular十大常见问题
  • 2017-05-11浅谈JavaScript中的apply/call/bind和this的使用
  • 2017-05-11浅谈Vue.js
  • 2017-05-11jQuery实现弹出窗口弹出div层的实例代码
  • 2017-05-11js实现下一页页码效果
  • 2017-05-11D3.js中强制异步文件读取同步的几种方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • javascript实现动态显示颜色块的报表效果
    • 浅谈JavaScript异步编程
    • jQuery实现级联下拉框实战(5)
    • 纯js模仿windows系统日历
    • 前台js页面定时显示弹窗消息提示
    • node.js+jQuery实现用户登录注册AJAX交互
    • 原生js实现下拉框功能(支持键盘事件)
    • 新闻上下滚动jquery 超简洁(必看篇)
    • jquery 判断是否支持Placeholder属性的方法
    • js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有