如何使用JS API进行基于LBS的开发

最新问答

• 注定孤独终X

  在开发移动端网页时，会遇到LBS的功能开发，利用第三方API是比较方便的。下面对百度地图的JS开发API应用做一些说明。
  1.引入相关CSS文件和库文件
  JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用，如需获取更高配额，请点击申请认证企业用户。
  地址：;lt;br />//参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。
  ;amp;ak=您的密钥
  //使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。
  
  
  
  2.在html中创建地图部分的容器
  

  
  3.开始实例化创建
  //实例化一个地图对象，绑定id为allmap
  var map = new BMap.Map("allmap");
  //开放插件功能
  map.enableScrollWheelZoom();//滚动缩放
  map.addControl(new BMap.NavigationControl());//地图的平移缩放控件
  map.addControl(new BMap.ScaleControl());
  map.addControl(new BMap.OverviewMapControl());
  map.addControl(new BMap.MapTypeControl());
  map.addControl(new BMap.GeolocationControl());
  // 功能
  var geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function(r){
  if(this.getStatus() == BMAP_STATUS_SUCCESS){
  var myIcon = new BMap.Icon("s/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(23, 25), imageOffset: new BMap.Size(0, - 10 * 25) });
  //位置图标，标注当前位置
  var mk = new BMap.Marker(r.point,{icon: myIcon});
  map.centerAndZoom(new BMap.Point(r.point.lng,r.point.lat), 14);
  map.addOverlay(mk);
  map.panTo(r.point);
  //向地图中自定义地点图标方法
  function addMarker(point,index,data){
  var storeIcon = new BMap.Icon("s/markers.png", new BMap.Size(23, 25), {
  offset: new BMap.Size(23, 25),
  imageOffset: new BMap.Size(0, - index * 25)
  });
  //创建信息窗口
  var messContent = '
  ' + '地址：'+data.address+'
  电话：'+data.tel+ '
  ';
  var searchInfoWindow = null;
  searchInfoWindow = new BMapLib.SearchInfoWindow(map, messContent, {
  title : data.name, //标题
  width : 290, //宽度
  height : 105, //高度
  panel : "panel", //检索结果面板
  enableAutoPan : true, //自动平移
  searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索
  BMAPLIB_TAB_TO_HERE, //到这里去
  BMAPLIB_TAB_FROM_HERE //从这里出发
  ] });
  var marker = new BMap.Marker(point,{icon: storeIcon});
  marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); })
  map.addOverlay(marker);}
  }else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true})
  浏览 331赞 91时间 2021-10-21