现象:
调用百度地图显示多个标识点
方法:
(1):
页面的详细展示:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>执行打卡页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
</head>
<style type="text/css">
body{font-size:14px;}
.mui-content table{
color: #555555;
margin:10px auto;
border-collapse: collapse;
}
.mui-content tr{line-height:30px;}
.mui-content,body {
background:#ffffff;
}
.BMap_cpyCtrl { //隐藏地图下面的超链接
display:none;
}
.anchorBL{
display:none;
}
.demo_main { padding: 0px; padding-top: 0px;}
.demo_title { padding: 0px; margin-bottom: 0px; background-color: #D3D8E0;text-align:center;}
.demo_content { padding: 0px; margin-bottom: 0px;}
</style>
<body>
<div class="mui-content" style="padding: 10px; margin-top: 60px;">
<div id="map-layout">
<div class="demo_main">
<fieldset class="demo_title">
当前位置
</fieldset>
<fieldset class="demo_content">
<div style="min-height: 300px;" id="map"></div>
</fieldset>
</div>
</div>
</div>
<script src="../../js/mui.min.js"></script>
var markerArr=new Array;
mui.toast("正在获取当前位置,请稍后!");
//获取地址方法
function onPlusReady() {
plus.geolocation.getCurrentPosition( successGetAddress, function(e){mui.toast("获取地址信息失败!!!点击右上角刷新")});
}
//成功获取地址信息函数
function successGetAddress(p){
var adds=document.getElementById('address')
var po;
if(p.address.poiName==undefined){
po="附近";
}else{
po=p.address.poiName+"附近";
}
var adds=p.address.province+p.address.city+p.address.district+p.address.street+po
markerArr = [{ title: "时间", points:p.coords.longitude+","+p.coords.latitude, address:adds, time:(new Date()).Format("yyyy-MM-dd hh:mm:ss") }];
mui.toast("地址获取成功");
map_load();
}
//刷新地址的方法
document.getElementById("refresh").addEventListener('tap',function(){
onPlusReady();
})
var map; //Map实例
function map_init() {
map = new BMap.Map("map");
//设置地图中心点
if(markerArr.length>0){
var s=markerArr[0].points.split(",")[0];
var d=markerArr[0].points.split(",")[1];
var point = new BMap.Point(s,d);
}else{
var point = new BMap.Point(114.110951,22.542484);
}
//初始化地图,设置地图大小级别。
map.centerAndZoom(point, 13);
//启用滚轮放大缩小
map.enableScrollWheelZoom(true);
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
//绘制点
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].points.split(",")[0];
var p1 = markerArr[i].points.split(",")[1];
var index = i;
plus.maps.Map.convertCoordinates(new plus.maps.Point(p0,p1), {},function successCallback(event){ //将第三方坐标系坐标转换成当前地图的坐标系坐标
var pointb = event.coord; //转换后的坐标值
var maker = addMarker(new window.BMap.Point(pointb.longitude, pointb.latitude));
addInfoWindow(maker, markerArr[index]);
}, function errorCallback(e){
mui.toast('地址获取异常!');
} );
}
}
// 添加标注
function addMarker(point, index) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
return marker;
}
// 添加信息窗口
function addInfoWindow(marker, poi) {
//pop弹窗标题
var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title+":"+poi.time + '</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.address + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });
marker.openInfoWindow(infoWindow);
var openInfoWinFun = function () {
marker.openInfoWindow(infoWindow);
};
marker.addEventListener("click", openInfoWinFun);
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
</script>
</body>
</html>