web页⾯调⽤百度地图，在百度页⾯标注多个标点，为百度地图标点添加标注，
点击标点跳转到百度。。。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<link href="${tPath }/css/common.css" rel="stylesheet">
<link href="${tPath }/css/pagination.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html, #allmap {
width:100%;
height:100%;
overflow: hidden;
margin:0;
font-family:"微软雅⿊";
}
</style>
<script type="text/javascript"
src="api.map.baidu/api?v=2.0&ak=申请的AK"></script>
<title>批量转换</title>
<style>
.link_button {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border: solid 1px #969696;
text-shadow:0-1px 0rgba(0,0,0,0.4);
-webkit-box-shadow: inset 01px 0rgba(255,255,255,0.4),01px 1px
rgba(0,0,0,0.2);
-
moz-box-shadow: inset 01px 0rgba(255,255,255,0.4),01px 1px
rgba(0,0,0,0.2);
box-shadow: inset 01px 0rgba(255,255,255,0.4),01px 1px
rgba(0,0,0,0.2);
background: #84CD9C;
color: #000000;
padding:8px 12px;
text-decoration: none;
}
.sel_btn1 {
width:70px;
}
</style>
</head>
<script type="text/javascript"
src="${tPath }/js/jquery-2.2.3.min.js"></script>
<script type="text/javascript"
src="${tPath }/bootstrap/js/bootstrap.min.js"></script>
<body>
<div id="allmap" ></div>
<script type="text/javascript">
//地图初始化
var bm =new BMap.Map("allmap");
//设置地图央视为⿊⾊的函数
bm.setMapStyle({style:'midnight'})
bm.setMapStyle({style:'midnight'})
bm.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));
//坐标转换完之后的回调函数
var obj = ${WXHomelongitudeLatitude};//后台传⼊的经纬度集合的session
var points =new Array();
var exception =0;
//获取当前位置
var longitude =null;
var latitude =null;
//定位当前位置的经纬度
var geolocation =new BMap.Geolocation();
Status()==BMAP_STATUS_SUCCESS){
var mk =new BMap.Marker(r.point);
longitude =r.point.lng;
latitude = r.point.lat;
/
/传⼊函数为每个经纬度进⾏跳转导航的经纬度赋值
lnglat(longitude,latitude);
}else{
alert('failed'+Status());
}
},{enableHighAccuracy:true})
function lnglat(longitude,latitude){
//遍历obj包含经纬度坐标的函数
百度地图时光机在哪for(var i=0;i<obj.length;i++){
points[i]=new BMap.Point(obj[i].longitude,obj[i].latitude);
//这个if判断是根据业务需求加的⽤来根据不同条件来改变标点的图⽚
if(obj[i].datastatistics!=null){
if(obj[i].datastatistics.blockagedegree>20){
//标点
var marker =new BMap.Marker(points[i]);
exception++;
}else{
//改变标点图⽚的⽅法
var myIcon  =new BMap.Icon('${tPath }/img/biaodian.png',new BMap.Size(30,34));
var marker =new BMap.Marker(points[i],{icon: myIcon });
}
}else{
var marker =new BMap.Marker(points[i]);
exception++;
}
//调⽤函数来为每个标点添加标注
createTag(marker,points[i],obj[i],longitude,latitude);
bm.addOverlay(marker);
}
}
function createTag(marker,m,obj,longitude,latitude){
//添加标注设置样式，并为其添加值 a标签为跳转百度地图导航的标签
var text ="<p>    </p><a  class='link_button ' href="+"${tPath }/WeiXinLogin/getStatistics?id="+obj. deviceId+">设备详情查看（"+obj.factoryId+"）</a>:"+
"<a target=' _blank' class='link_button sel_btn1 ' href="+"api.map.baidu/direction?origin="+latitude+","+longitude+"&destination="+marker.poin t.lat+","+marker.point.lng+"&mode=driving®ion=福建&output=html>去这⾥</a>";
var infoWindow =new BMap.InfoWindow("<p style='font-size:15px;'>"+ text +"</p>");
marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);});
}
</script>
</body>
</html>
代码没多少但是注意我经纬度都是在session中取的⾃⼰使⽤⼀定要注意数据的填⼊
function lnglat(longitude,latitude){
//遍历obj包含经纬度坐标的函数
for(var i=0;i<obj.length;i++){
//经纬度写⼊
points[i]=new BMap.Point(obj[i].longitude,obj[i].latitude);
//这个if判断是根据业务需求加的⽤来根据不同条件来改变标点的图⽚
if(obj[i].datastatistics!=null){
if(obj[i].datastatistics.blockagedegree>20){
//标点
var marker =new BMap.Marker(points[i]);
exception++;
}else{
//改变标点图⽚的⽅法
var myIcon  =new BMap.Icon('${tPath }/img/biaodian.png',new BMap.Size(30,34));
var marker =new BMap.Marker(points[i],{icon: myIcon });
}
}else{
var marker =new BMap.Marker(points[i]);
exception++;
}
//调⽤函数来为每个标点添加标注
createTag(marker,points[i],obj[i],longitude,latitude);
bm.addOverlay(marker);
}
这⼀段代码中的obj[i].datastatistics.blockagedegree 和obj[i].datastatistics!都是我session集合中有的数据不要纠结根据⾃⼰的实际业务需求看懂以后更改。注意
最终效果
点击去这⾥后跳转百度地图规划路线
如果觉得百度地图⿊⾊不好看改回原版可以把61⾏附近的
bm.setMapStyle({style:‘midnight’}) 这句话删掉到这就ok了