JavaScript百度地图接口开发

   <p>最近在用laravel框架仿写饿了么外卖商城,于是学习了一下有关地图接口相关的知识,以下是百步地图接口开发文档的一些类和方法的使用....</p>    <h2>JavaScript API v2.0介绍</h2>    <p>百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用，包含了构建地图基本功能的各种接口，提供了诸如本地搜索、路线规划等数据服务。</p>    <p>该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。</p>    <p>JavaScript API首家支持Https，如需要申请Https服务，请您认证企业信息，成为企业认证用户后，https将自动开通，同时获得更高的服务配额。</p>    <p>注意：仅JavaScript API</p>    <p>V2.0版本支持https，其他JavaScript API版本均不支持。使用https服务，请先检查您的版本以及配置注意事项。</p>    <h2>调用API的基本文件格式</h2>    <p>获取JavaScript API服务方法:</p>    <p>自JS APIv1.5之后，最新版本为2.0，您需要首先申请密钥（ak），才可成功加载API JS文件。ak的使用方法如下：</p>    <pre>  src="http://api.map.baidu.com/api?v=2.0&ak"您的密钥"type="text/javascript"></pre>    <p>其中参数v为API当前的版本号，目前最新版本为2.0。在1.2版本之前您还可以设置services参数，以告知API是否加载服务部分，true表示加载，false表示不加载，默认为true。。</p>    <p>创建地图实例</p>    <pre>  var map = new    BMap.Map("container");    //创建点坐标    var point = newBMap.Point(104.045,30.559);    //地图初始化    map.centerAndZoom(point,15);</pre>    <h2>百度地图控件</h2>    <p>向地图添加控件:</p>    <pre>  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));</pre>    <h2>地图覆盖物</h2>    <p>所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。</p>    <p>可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。</p>    <pre>  //创建标注:    var marker = newBMap.Marker(new BMap.Point(104.045,30.559));    //将标注添加到地图中:    map.addOverlay(marker);</pre>    <h2>地图信息窗口提示</h2>    <p>信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用InfoWindow来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。</p>    <pre>  var opts = {    width : 250,//信息窗口宽度    height: 100,//信息窗口高度    title : "Hello"//信息窗口标题    }    var infoWindow = newBMap.InfoWindow("World", opts);//创建信息窗口对象    map.openInfoWindow(infoWindow,map.getCenter());//打开信息窗口</pre>    <h2>地图信息窗口提示(事件触发显示)</h2>    <p>事件方法与Map事件机制相同。可参考事件部分</p>    <p>监听标注事件:</p>    <pre>  marker.addEventListener("click",function(){    alert("您点击了标注");    });    给标注添加点击事件:    marker.addEventListener("click",function(){    map.openInfoWindow(infoWindow,map.getCenter());    });</pre>    <h2>定位(浏览器定位)</h2>    <p>Geolocation地图定位,返回用户当前的位置。此方法利用浏览器的geolocation接口获取用户当前位置，不支持的浏览器将无法获取。</p>    <p>创建Geolocation对象实例:</p>    <pre>  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());    }    })</pre>    <h2>定位(IP定位)</h2>    <p>LocalCity此类用于获取用户所在的城市位置信息。(根据用户IP自动定位到城市)</p>    <p>创建LocalCity对象实例:</p>    <pre>  myCity = new BMap.LocalCity();    myCity.get(function(e){    map.setCenter(e.name);    alert(e.name);    });</pre>    <h2>定位(经纬度定位)</h2>    <p>点击获取经纬度实例:</p>    <pre>  map.addEventListener("click",function(e){    alert(e.point.lng + "," + e.point.lat);    });</pre>    <p>根据经纬度定位实例:</p>    <pre>  var new_point = new BMap.Point(116.299689,40.1196618);    var marker = newBMap.Marker(new_point);//创建标注    map.addOverlay(marker);//将标注添加到地图中    map.panTo(new_point);</pre>    <h2>地址解析</h2>    <pre>  var myGeo = newBMap.Geocoder();//创建地址解析器实例    //将地址解析结果显示在地图上,并调整地图视野    myGeo.getPoint("北京市昌平区回龙观地铁站", function(point){    if (point) {    map.centerAndZoom(point, 15);    map.addOverlay(new BMap.Marker(point)); //在地图上标注地理位置    }else{    alert("您选择地址没有解析到结果!");    }    }, "北京市");</pre>    <h2>逆地址解析</h2>    <p>Geocoder类用于获取用户的地址解析</p>    <pre>  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);    });</pre>    <h2>步行规划</h2>    <p>WalkingRoute用于获取步行路线规划方案。创建一个步行导航实例。location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。</p>    <p>步行规划实例:</p>    <pre>  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("天坛公园", "故宫");</pre>    <h2>驾车规划</h2>    <p>DrivingRoute此类用于获取驾车路线规划方案</p>    <p>驾车线路规划实例:</p>    <pre>  var driving = newBMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}});    driving.search("女子医院", "王府井广场");</pre>    <h2>公交检索</h2>    <p>TransitRoute用于获取公交路线规划方案</p>    <p>公交检索实例:</p>    <pre>  var transit = newBMap.TransitRoute(map, {renderOptions: {map: map, panel:"r-result"}});    transit.search("中医大省医院", "明宇金融广场");</pre>    <h2>信息检索</h2>    <p>LocalSearch用于位置检索、周边检索和范围检索</p>    <p>关键字检索实例:</p>    <pre>  var local = new BMap.LocalSearch(map,{    renderOptions:{map: map}    });    local.search("景点");</pre>    <p>本地检索结果实例:</p>    <pre>  var local = newBMap.LocalSearch(map, {    renderOptions: {map: map, panel: "r-result"}    });    local.search("餐饮");</pre>    <p> </p>    <p>来自：http://www.jianshu.com/p/9736fa8b44b4</p>    <p> </p>