前端使用百度地图搜索

最新推荐文章于 2024-08-25 23:50:34 发布

原创最新推荐文章于 2024-08-25 23:50:34 发布 · 964 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#使用百度地图搜索

前端专栏收录该内容

3 篇文章

订阅专栏

使用百度地图根据输入地址搜索且显示经纬度以及根据经纬度显示地址详细信息

<!--HTML代码如下-->

<div class="add-box-div">
     <input type="text" id="street" name="address_detail" placeholder="路/弄号"><button class="btn" @click="setPlace()">搜索定位</button>
     <div id="allmap"></div>
</div>
<div class="add-div"><span style="width:50px">经度：</span><input type="text" id="longitude" style="width:150px" /></div>
<div class="add-div" style="margin-left:20px;"><span style="width:50px">维度：</span><input type="text" id="latitude" style="width:150px"/></div>
<button class="btn" style="margin-left:20px;" @click="resetPlace">重置定位</button>

// js代码如下
// 显示地图
showMap: function () {
      // 创建Map实例
      let map = new BMap.Map("allmap");
      // 初始化地图,设置中心点坐标，
      let point = new BMap.Point(120.21,30.25);
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true)
      map.enableDoubleClickZoom(true)
      map.setCurrentCity("杭州"); 
      let marker = new BMap.Marker(point);  
      map.addOverlay(marker);
},
//根据输入的地址信息进行搜索
setPlace:function () {
      let map = new BMap.Map("allmap");
      let point = new BMap.Point(120.21,30.25);
      map.enableScrollWheelZoom(true)
      map.enableDoubleClickZoom(true)
      let province = $.trim($("#province option:selected").text())
      let city = $.trim($("#city option:selected").text())
      let myValue
      if (province == city) {
        myValue = province+$.trim($("#area option:selected").text())+$.trim($("#street").val())
      } else {
        myValue = province+city+$.trim($("#area option:selected").text())+$.trim($("#street").val())
      }
      //清除地图上所有覆盖物
      map.clearOverlays();    
      let vm = this
      let local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: function () {
          vm.userlocation = local.getResults().getPoi(0).point;    //获取智能搜索的结果
          map.centerAndZoom(vm.userlocation, 18);
          map.addOverlay(new BMap.Marker(vm.userlocation));    //添加标注
          //经度
          $("#longitude").val(vm.userlocation.lng)
          //维度
          $("#latitude").val(vm.userlocation.lat)
        }
      });
      local.search(myValue);
    },
    //逆地址解析 根据经纬度显示详细地址名称
    resetPlace: function () {
      let vm = this
      let longitude = $("#longitude").val()
      let latitude = $("#latitude").val()
      let map = new BMap.Map("allmap");
      let point = new BMap.Point(longitude,latitude);
      map.centerAndZoom(point,20)
      map.enableScrollWheelZoom(true)
      if(longitude != "" && latitude != ""){
        map.clearOverlays(); 
        let point = new BMap.Point(longitude,latitude);
        let geoc = new BMap.Geocoder(); 
        geoc.getLocation(point,function(rs){ 
          let addComp = rs.addressComponents; 
          let site_address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
          $('#street').val(site_address)
        });
        let marker = new BMap.Marker(point);  
        map.addOverlay(marker)
      } else {
        alert("请输入经纬度");
      }
    },