目标：实现一个能自动定位我当前位置的地图，并且地图上能显示我想要标记物，以及能搜索地图对应的位置。这地图只能在IE浏览器上有效果，其他浏览器不支持。
1.首先先去百度地图开放平台注册个账号：百度开发平台
然后点击控制台
3.在对应页面中，引入百度api的js
4.写上你想承载这地图dom元素
5.实现获取当前位置的Js代码：这里如果获取成功，会执行locationSuccess的回调方法。如果获取失败了，会执行locationError回调方法。
function getNowLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(locationSuccess, locationError, { // 指示浏览器获取高精度的位置，默认为false enableHighAccuracy: true, // 指定获取地理位置的超时时间，默认不限时，单位为毫秒 timeout: 5000, // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。 maximumAge: 3000 }); }else{ alert("浏览器不支持Html5来获取地理位置信息"); } }locationSuccess回调方法实现：也就是获取当前位置的经度和纬度（H5浏览器自带的定位功能），然后根据经度和纬度获取当前的位置（调用百度api方法）
function locationSuccess(position) { let lat = position.coords.latitude; let lng = position.coords.longitude; const pointBak = new BMap.Point(lng, lat); const convertor = new BMap.Convertor(); convertor.translate([pointBak], 1, 5,function(resPoint) { if(resPoint && resPoint.points && resPoint.points.length>0){ lng = resPoint.points[0].lng; lat = resPoint.points[0].lat; } console.log("当前位置经度为:" + lng + "纬度为:" +lat); const point = new BMap.Point(lng, lat); const geo = new BMap.Geocoder(); geo.getLocation(point, (rs) => { var addComp = rs.addressComponents; console.log(addComp); var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; console.log("当前的位置为:" + result); initMap(lng, lat, result); }); }); }locationError回调方法实现：
function locationError(error) { switch(error.code) { case error.TIMEOUT: alert("连接超时，请重试"); break; case error.POSITION_UNAVAILABLE: alert('非常抱歉，我们暂时无法为您所在的星球提供位置服务'); break; case error.PERMISSION_DENIED: alert('您拒绝了使用位置共享服务，查询已取消'); break; default: alert('发生未知错误!'); break; } }6.接下来使用前面获取到的经度和纬度初始化百度地图：
function initMap(lng, lat, address) { var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(lng, lat), 20); // 初始化地图,设置城市和地图级别。 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 markInfectiveLocation(map); markNowLocation(map, lng, lat, address); searchKeyWordNote(map); }7.initMap方法中调用了markInfectiveLocation()标记疫情位置方法和markNowLocation标记当前位置的方法和searchKeyWordNote搜索方法。分别看代码：
var infectiveAddress = []; function markInfectiveLocation(map) { <c:forEach items="${mapsList}" var="maps" varStatus="vs"> var maps = { lng: "${maps.lng}", lat: "${maps.lat}", createTime: "${maps.createTime}", location: "${maps.location}", count: "${maps.count}", }; infectiveAddress.push(maps); </c:forEach> for(let i=0; i<infectiveAddress.length; i++) { let marker = new BMap.Marker(new BMap.Point(parseFloat(infectiveAddress[i].lng), parseFloat(infectiveAddress[i].lat)), {}); map.addOverlay(marker); var opts = { width : 70, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "疫情情况" , // 信息窗口标题 }; let infoWindow = new BMap.InfoWindow('<span style="color:red">疫情位置：'+ infectiveAddress[i].location +'<br/>确诊人数：' + infectiveAddress[i].count + '<br/>登记时间：'+ format(infectiveAddress[i].createTime) +'</span>', opts); // 创建信息窗口对象 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow, new BMap.Point(parseFloat(infectiveAddress[i].lng), parseFloat(infectiveAddress[i].lat))); //开启信息窗口 }); map.openInfoWindow(infoWindow, new BMap.Point(parseFloat(infectiveAddress[i].lng), parseFloat(infectiveAddress[i].lat))); //开启信息窗口 } } //时间格式显示 function add0(m){return m<10?'0'+m:m } function format(shijianchuo){ //shijianchuo是整数，否则要parseInt转换 var time = new Date(shijianchuo); time.setHours(time.getHours() - 14); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s); } function markNowLocation(map, lng, lat, address) { var marker = new BMap.Marker(new BMap.Point(lng, lat), {}); map.addOverlay(marker); var opts = { width : 70, // 信息窗口宽度 height: 30, // 信息窗口高度 title : "当前位置" , // 信息窗口标题 }; var infoWindow = new BMap.InfoWindow('地址：' + address, opts); // 创建信息窗口对象 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow, new BMap.Point(lng, lat)); //开启信息窗口 }); map.openInfoWindow(infoWindow, new BMap.Point(lng, lat)); //开启信息窗口 } var pp = null; function searchKeyWordNote(map) { var ac = new BMap.Autocomplete( //建立一个自动完成的对象 {"input" : "suggestId" ,"location" : map }); ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; if(pp != null){ deletePointMarker(map); } setPlace(map, myValue); }); layer.close(id); }Tips：这里${mapsList}是我从后端获取的数据，然后遍历，你们可以根据自己需求实现。
坑点：遍历标记物时候，直接遍历会导致所有标记物都只显示最后一条数据的数据。因此先用var infectiveAddress = [];进行存储，再对这个存储的数组进行遍历可以解决这个问题。
完整项目链接：SSM社区疫情管理系统
