[百度地图]web集成百度地图点击获取位置信息,以及搜索获取位置信息案列

笑风尘灬

已于 2022-09-27 09:47:38 修改

阅读量483

点赞数

文章标签：前端 javascript html

于 2022-09-27 09:42:58 首次发布

本文链接：https://blog.csdn.net/qq_44836497/article/details/127065568

版权

<!-- 百度地图api -->
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=您的秘钥"></script>

// 百度地图API功能
function G(id) {
   return document.getElementById(id);
}
//百度地图初始化，检索
var map = new BMapGL.Map('container');
map.centerAndZoom('西安市', 13);
map.enableScrollWheelZoom(true);
var geoc = new BMapGL.Geocoder();
map.addEventListener('click', function(e){
   //清除地图上所有的覆盖物
   map.clearOverlays();
   var pt = e.latlng;
   var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
   map.addOverlay(marker);
   geoc.getLocation(pt, function(rs){
      var addComp = rs.addressComponents;
      $("#startProvince").val(addComp.province);
      $("#startCity").val(addComp.city);
      if (""==addComp.district && addComp.district == undefined || addComp.district == null){
         $("#startCountry").val(addComp.city);
      }
      $("#startCountry").val(addComp.district);
      $("#stationName").val(addComp.province + addComp.city  + addComp.district  + addComp.street  + addComp.streetNumber);
      $("#address").val(addComp.province + addComp.city  + addComp.district  + addComp.street  + addComp.streetNumber);
      $("#stationLon").val(pt.lng);
      $("#stationLat").val(pt.lat);
   })
})
var ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
   {"input" : "tipinput"
      ,"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;
   setPlace();
});
function setPlace(){
   map.clearOverlays();    //清除地图上所有覆盖物
   function myFun(){
      var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
      map.centerAndZoom(pp, 18);
      map.addOverlay(new BMapGL.Marker(pp));    //添加标注
      geoc.getLocation(pp, function(rs){
         var addComp = rs.addressComponents;
         $("#startProvince").val(addComp.province);
         $("#startCity").val(addComp.city);
         if (""==addComp.district && addComp.district == undefined || addComp.district == null){
            $("#startCountry").val(addComp.city);
         }
         $("#startCountry").val(addComp.district);
         $("#stationName").val(myValue);
         $("#address").val(addComp.province + addComp.city  + addComp.district  + addComp.street  + addComp.streetNumber);
         $("#stationLon").val(pp.lng);
         $("#stationLat").val(pp.lat);
      })
   }
   var local = new BMapGL.LocalSearch(map, { //智能搜索
      onSearchComplete: myFun
   });
   local.search(myValue);
}

<div id="mapSearch" style="position: absolute; z-index: 100;  background: #fff;padding: 10px 16px; margin-left: 20px; margin-top: 20px;">
	<div class="input-item">
		<span class="input-item-text" style="width:8rem; font-size: 16px">请输入关键字&nbsp;&nbsp;&nbsp;&nbsp;</span>
		<input id='tipinput' type="text">
	</div>
	<div id="searchResultPanel" style="border:1px solid red;width:150px;height:400px; position: absolute;top:20px;display:none;"></div>
</div>
<div  class="col-xs-8" id = "container" style="height: 400px">
	<div class="info">
	</div>
</div>