先看效果

这里引入的是百度地图，根据下图操作即可（选择的是浏览器端,也可以用3.0或者2.0，这里用到的是GL）

获取ak后把这段代码放在index里

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=放在这里"></script>

地图显示位置

initMap() {
   // console.log("初始化地图");
   map = new BMapGL.Map("mapcontainer");   // 这里的值是上面图片div的id
   window.bmap = map;
   map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
   map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

   map.addEventListener("click", function(e) {
     // console.log("点击位置经纬度：" + e.latlng.lng + "," + e.latlng.lat);
     // 用到的是GL 所以这里是e.latlng.lng，如果是3.0或者2.0则是e.point
     map.clearOverlays();   // 清除地图所有标记点
     map.centerAndZoom(new BMapGL.Point(e.latlng.lng, e.latlng.lat), 15);
// centerAndZoom 第一个参数根据点击的地方重新确认地图中心点，第二个参数是地图缩放级别，最大为19，最小为0
     var marker1 = new BMapGL.Marker(
     // Marker是标注表示地图上的点，可自定义标注的图标。
       new BMapGL.Point(e.latlng.lng, e.latlng.lat)
     );
     map.addOverlay(marker1);
     that.rowInfo.xaxis = e.latlng.lng;  // 这里是储存两个地点信息
     that.rowInfo.yaxis = e.latlng.lat;
     
     // 创建地理编码实例
     var myGeo = new BMapGL.Geocoder();
     
     // 根据坐标得到地址描述
     myGeo.getLocation(
       new BMapGL.Point(e.latlng.lng, e.latlng.lat),
       function(result) {
         if (result) {
           that.rowInfo.remark = result.address;  // 获取点击的地点名称，并赋值给左侧的input
         }
       }
     );
   });
 },

搜索框

<el-col :span="24" :offset="0">
   <el-form-item label="详细地址" prop="remark">
     <el-autocomplete
       v-model="rowInfo.remark"
       :fetch-suggestions="querySearch"
       placeholder="请输入关键字选择详细地址"
       @blur='valueChange'
       @select="handleSelect"
       name="remark"
       style="width: 85%; "
       :trigger-on-focus="false"
       :highlight-first-item='true'
       ref="elautocomplete"
     >
       <template slot-scope="{ item }">
         <div v-if="item" class="map-name">
           {{ item && item.value ? item.value : "" }}
         </div>
         <span v-if="item" class="map-addr">{{
           item && item.address ? item.address : ""
         }}</span>
       </template>
     </el-autocomplete>
   </el-form-item>
 </el-col>

储存输入信息

搜索框方法

querySearch(queryString, cb) {
   //输入后回调查询百度地图地址
   if (!queryString) {
     return;
   }
   var local = null;
   var options = {
     onSearchComplete: function(results) {
       // 判断状态是否正确
       if (local.getStatus() == BMAP_STATUS_SUCCESS) {
         var s = [];
         for (var i = 0; i < results.getCurrentNumPois(); i++) {
           s.push({
             value: results.getPoi(i).title,
             address: results.getPoi(i).address,
             point: results.getPoi(i).point
           });
         }
         cb(s);
       }
     }
   };
   local = new BMapGL.LocalSearch(map, options);
   local.search(queryString);
   this.$refs['elautocomplete'].suggestions=[];
 },
    
handleSelect(item) {
   //处理地图检索选择
   let lat = item.point.lat;
   let lng = item.point.lng;

   map.clearOverlays();
   map.centerAndZoom(new BMapGL.Point(lng, lat), 15);

   var marker1 = new BMapGL.Marker(new BMapGL.Point(lng, lat));
   map.addOverlay(marker1);
   this.rowInfo.xaxis = lng;
   this.rowInfo.yaxis = lat;
 },
 
 valueChange() {
 // 当搜索框内容改变但不选择下拉内容时 清除输入的内容
     this.rowInfo.remark=''
 },

我们在日常出行时难免遇到自己不熟悉的路线地点。开启百度地图APP。可以快速定位到当前位置。用户输入目的地。可以自行选择出行方式。还可以设置家所在地。回家时不用手动搜索。首页内直接点击查看路线。

百度地图怎么添加家的位置

1.首先打开百度地图。点击下方回家设置

2.进入设置界面后。可以自由选择地点添加。也可以直接选择当前定位

3.设置完成后还可以选择日常通勤方式。系统会优先为你推荐出行路线

4.设置完成后就可以在首页看到回家的时间了

目标：实现一个能自动定位我当前位置的地图，并且地图上能显示我想要标记物，以及能搜索地图对应的位置。这地图只能在IE浏览器上有效果，其他浏览器不支持。

先上效果图：




接下来说说怎么实现：

1.首先先去百度地图开放平台注册个账号：百度开发平台

然后点击控制台

填写开发者资料并认证。

2.接着去创建AK，也就是授权码，这个很关键，必须要去申请创建，要不然项目中没法调用百度地图的API。

这里应用名称随便写，应用类型选择服务端，启用服务按我图中勾选为主。

设置白名单IP：设置0.0.0.0/0就行
点完提交就能获取到AK了，记得保存下来，后面会用到。

3.在对应页面中，引入百度api的js

 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的AK"></script>

4.写上你想承载这地图dom元素

<div id="r-result">地点搜索:<input type="text" id="suggestId" size="20" placeholder="请输入地点信息..." style="width:250px;margin-top: 10px;margin-left:10px;padding: 0 20px;line-height: 36px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<div id="l-map" style="width:700px; height:680px;margin-top: 10px;"></div>

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社区疫情管理系统