一、显示地图配置
申请百度地图 AK /apiconsole/key
有了ak自己上代码 注意代码中一定要把自己的ak填入
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ page isELIgnored="false"%><!DOCTYPE html><html><head><link href="${pageContext.request.contextPath }/css/common.css" rel="stylesheet"><link href="${pageContext.request.contextPath }/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="https://api./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 0 rgba(0, 0, 0, 0.4);-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1pxrgba(0, 0, 0, 0.2);-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1pxrgba(0, 0, 0, 0.2);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1pxrgba(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="${pageContext.request.contextPath }/js/jquery-2.2.3.min.js"></script><script type="text/javascript"src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.min.js"></script><body><div id="allmap" style=" height: 100%; width: 100%"></div><script type="text/javascript">//地图初始化var bm = new BMap.Map("allmap");bm.centerAndZoom(new BMap.Point(118.599943,24.800427), 11);//设置地图央视为黑色的函数bm.setMapStyle({style:'midnight'}) bm.enableScrollWheelZoom();bm.enableContinuousZoom();bm.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));//坐标转换完之后的回调函数var obj = ${WXHomelongitudeLatitude};//后台传入的经纬度集合的sessionvar points = new Array();var exception = 0;//获取当前位置var longitude = null;var latitude =null;//定位当前位置的经纬度var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){console.log(r.point)if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);longitude =r.point.lng;latitude = r.point.lat;//传入函数为每个经纬度进行跳转导航的经纬度赋值lnglat(longitude,latitude);}else {alert('failed'+this.getStatus());} },{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('${pageContext.request.contextPath }/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="+"${pageContext.request.contextPath }/WeiXinLogin/getStatistics?id="+obj.deviceId+">设备详情查看（"+obj.factoryId+"）</a>:"+"<a target=' _blank' class='link_button sel_btn1 ' href="+"http://api./direction?origin="+latitude+","+longitude+"&destination="+marker.point.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('${pageContext.request.contextPath }/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了
web页面调用百度地图 在百度页面标注多个标点 为百度地图标点添加标注 点击标点跳转到百度地图进行导航。
