【高德地图】web集成百度地图点击获取位置信息,以及搜索获取位置信息案列

最新推荐文章于 2023-03-23 10:27:11 发布

笑风尘灬

最新推荐文章于 2023-03-23 10:27:11 发布

阅读量526

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

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

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的秘钥&plugin=AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.DistrictLayer,AMap.AutoComplete,AMap.PlaceSearch,AMap.Walking"></script>

AMapUI.loadUI(['misc/PositionPicker'],PositionPicker => {
   var map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 10,
      center: [110.50, 38.83]
   });
   //为地图注册click事件获取鼠标点击出的经纬度坐标
   map.on('click', function(e) {
      document.getElementById('hiddenMap').value = e.lnglat;
      regeoCode();
   });
   //声明点标记
   var marker = new AMap.Marker();
   //声明Geocoder，使用getAddress()方法来获取坐标点对应的地址
   var geocoder = new AMap.Geocoder({
      city: '北京',
      radius: 1000
   })
   // 使用geocoder做地理/逆地理编码
   function regeoCode() {
      var lnglat  = document.getElementById('hiddenMap').value.split(',');
      map.add(marker);
      marker.setPosition(lnglat);
      geocoder.getAddress(lnglat, function(status, result) {
         if (status === 'complete'&&result.regeocode) {
            console.log("result.regeocode is====="+JSON.stringify(result.regeocode))
            $("#startProvince").val(result.regeocode.addressComponent.province);
            $("#startCity").val(result.regeocode.addressComponent.city);
            $("#startCountry").val(result.regeocode.addressComponent.district);
            $("#address").val(result.regeocode.formattedAddress);
            $("#stationLon").val(lnglat[0]);
            $("#stationLat").val(lnglat[1]);
            $("#stationName").val('');
         }else{
            log.error('根据经纬度查询地址失败')
         }
      });
   }
   //输入提示
   var autoOptions = {
      input: "tipinput"
   };

   AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
      var auto = new AMap.AutoComplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
         map: map
      });
      //构造地点查询类
      auto.on("select", select);//注册监听，当选中某条记录时会触发
      function select(e) {
         console.log("e.poi is ====="+JSON.stringify(e.poi));
         let myDistrict = e.poi.district;
         let region = myDistrict.match(/.+?(省|市|特别行政区|自治区|自治州|县|区|岛|城)/g);
         placeSearch.setCity(e.poi.adcode);
         placeSearch.search(e.poi.name);  //关键字查询查询
         //赋值
         let regionArray = region.toString().split(',');
         $("#startProvince").val(regionArray[0]);
         $("#startCity").val(regionArray[1]);
         $("#startCountry").val(regionArray[2]);
         $("#address").val(e.poi.address);
         $("#stationName").val(e.poi.name);
         let locationArry = e.poi.location.toString().split(',');
         $("#stationLon").val(locationArry[0]);
         $("#stationLat").val(locationArry[1]);
         $("#areaCode").val(e.poi.adcode);
      }
   });
})