百度地图实现多点定位(包含两种点：当前自己所在的位置和周围需要查找的点 )

首先，要感谢下清山博客的博文 ，，， 链接地址：http://blog.csdn.net/a497785609/article/details/24009031

1、直接上图，看看效果（本例中的坐标数据为前端假数据）

解释一下大概实现的功能:(1)用户访问网页时，定位到用户当前的位置(图中小熊头像)，坐标可由前端获取或者后台http传入

（2）再搜索到用户周围的物流网点，物流网点坐标数组由后台传入，前端再渲染

2、html代码部分，很简单（定义一个地图容器即可）

3、JS代码部分

    var map; //自己的坐标(后台传入或者前端获取)  var currentLat = 104.06374729999999;  var currentLon = 30.593283399999994;  var my ={ title: "自己的位置",tel:'13386975678'};  //需要展示的物流点位置(后台传入)var markerArr = [  { title: "测试位置1", point: "104.076338,30.584741",tel:'028-56789876'},  { title: "测试位置2", point: "104.058338,30.590103",tel:'028-98789999'}];  function map_init() {  map = new BMap.Map("map");  //第1步：设置自己的坐标(定位到当前城市)  var point = new BMap.Point(currentLat,currentLon);  //第2步：初始化地图,设置中心点坐标和地图缩放级别。  map.centerAndZoom(point, 14);  //第3步：启用滚轮放大缩小  map.enableScrollWheelZoom(true);  //第4步：向地图中添加缩放控件  /*var ctrlNav = new window.BMap.NavigationControl({  anchor: BMAP_ANCHOR_TOP_LEFT,  type: BMAP_NAVIGATION_CONTROL_LARGE  });  map.addControl(ctrlNav);*/  //第5步：向地图中添加缩略图控件  /*var ctrlOve = new window.BMap.OverviewMapControl({  anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  isOpen: 1  });  map.addControl(ctrlOve);*/  //第6步：向地图中添加比例尺控件  /*var ctrlSca = new window.BMap.ScaleControl({  anchor: BMAP_ANCHOR_BOTTOM_LEFT  });  map.addControl(ctrlSca);  *///第7步：绘制物流点    for (var i = 0; i < markerArr.length; i++) {  var p0 = markerArr[i].point.split(",")[0];  var p1 = markerArr[i].point.split(",")[1];  //var maker = addMarkerCar(new window.BMap.Point(p0, p1), i); //第二个参数非必须(调用百度图标时才添加)var maker = addMarkerCar(new window.BMap.Point(p0, p1));//添加货车图标  addInfoWindow(maker,markerArr[i]);   }  //绘制自己的坐标和添加图标//var mymaker = addMarkerPeople(new window.BMap.Point(currentLat, currentLon), 10);var mymaker = addMarkerPeople(new window.BMap.Point(currentLat, currentLon));addInfoWindow(mymaker,my);  // 添加信息窗口(可自定义样式)function addInfoWindow(marker, poi) {//跳动动画  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //pop弹窗标题  var title = '' + poi.title + '';  //pop弹窗信息  var html = [];  html.push('');  html.push('');  html.push('');  html.push('');  html.push('');  html.push('
电话:
' + poi.tel + ' 
');  var infoWindow = new BMap.InfoWindow(html.join(""),{title:title,width:160});//默认显示自己的信息窗口marker.openInfoWindow(infoWindow); var openInfoWinFun = function () {  marker.openInfoWindow(infoWindow);  };     //点击坐标点切换信息窗口 marker.addEventListener("click", openInfoWinFun); }  }  // 添加标注图标  function addMarkerCar(point,index) {  var myIcon = new BMap.Icon("img/car.png",  new BMap.Size(32, 22), { });var marker = new BMap.Marker(point,{ icon: myIcon });  map.addOverlay(marker);  return marker;    }function addMarkerPeople(point,index) {  var myIcon = new BMap.Icon("img/man.png",  new BMap.Size(27, 24), { });var marker = new BMap.Marker(point,{ icon: myIcon });  map.addOverlay(marker);  return marker;    }//异步调用百度js  function map_load() {  var load = document.createElement("script");  load.src = "http://api.map.baidu.com/api?v=2.0&ak=kayQ1GyV3fnCcDORPreyCKcGkXI6pYU0&callback=map_init";  document.body.appendChild(load);  }  window.onload = map_load; 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！