这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近在工作中在用 laravel 框架仿写饿了么外卖商城, 于是学习了一下有关地图接口相关的知识, 以下是百步地图接口开发文档的一些类和方法的使用,需要的朋友们可以参考借鉴,下面来一起看看吧。
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
方法移除覆盖物,注意此方法不适用于 InfoWindow。
- map.removeOverlay
- //创建标注:
- 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("餐饮");
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0520/327936.html