百度地图实现多点定位(包含两种点:当前自己所在的位置和周围需要查找的点 )
2017-02-28 15:42
701 查看
首先,要感谢下清山博客的博文
,,, 链接地址:http://blog.csdn.net/a497785609/article/details/24009031
1、直接上图,看看效果(本例中的坐标数据为前端假数据)
解释一下大概实现的功能:(1)用户访问网页时,定位到用户当前的位置(图中小熊头像),坐标可由前端获取或者后台http传入
(2)再搜索到用户周围的物流网点,物流网点坐标数组由后台传入,前端再渲染
2、html代码部分,很简单(定义一个地图容器即可)
<!-- 地图 -->
<div class="map" id="map">
</div>
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 = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">电话:</td>');
html.push('<td style="vertical-align:top;line-height:16px">' + poi.tel + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
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;
,,, 链接地址:http://blog.csdn.net/a497785609/article/details/24009031
1、直接上图,看看效果(本例中的坐标数据为前端假数据)
解释一下大概实现的功能:(1)用户访问网页时,定位到用户当前的位置(图中小熊头像),坐标可由前端获取或者后台http传入
(2)再搜索到用户周围的物流网点,物流网点坐标数组由后台传入,前端再渲染
2、html代码部分,很简单(定义一个地图容器即可)
<!-- 地图 -->
<div class="map" id="map">
</div>
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 = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">电话:</td>');
html.push('<td style="vertical-align:top;line-height:16px">' + poi.tel + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
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;
相关文章推荐
- js实现百度地图定位于地址逆解析,显示自己当前的地理位置
- Android地图定位-百度地图上定位自己所在的位置
- Android地图定位-百度地图上定位自己所在的位置
- 案例4_Android地图定位-百度地图上定位自己所在的位置
- Android地图定位-百度地图上定位自己所在的位置
- 百度地图开发--实现打开地图自动定位到上次定位点然后在定位到自己的位置
- 在Fragment中实现百度地图,定位到当前位置(基于SDKv2.1.0)
- 【经验小谈】百度定位api使用 百度定位demo 百度地图快速定位 百度地图获取当前位置 获取自己的位置 百度定位示例
- 调用手机GPS实现当前位置定位并展现百度地图上
- 百度地图上定位自己所在的位置
- 实验6:Android地图定位-百度地图上定位自己所在的位置
- Android百度地图之位置定位和附近查找代码简单实现 (上)
- 实验6:Android地图定位-百度地图上定位自己所在的位置
- (转)Android百度地图之位置定位和附近查找代码简单实现 (上)
- 【iOS百度地图系列_1】在地图上定位当前位置
- 百度Android定位SDK实现获取当前经纬度及位置
- [android] 百度地图开发 (三).定位当前位置及getLastKnownLocation获取location总为空问题
- html5定位获取当前位置并在百度地图上显示
- html5定位获取当前位置并在百度地图上显示【转】
- Android使用百度地图SDK获得当前设备位置所在的省、市