当前位置：网站首页>Gaode map search, drag and drop query address

Gaode map search, drag and drop query address

2022-04-23 17:45:00 【A long summer】

demo- design sketch

Insert picture description here
Insert picture description here

Code –（ Referenced map ,key Replace the value with your own ）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Map search and drag location </title>
  <style>
    #mapContainer{
      position: relative;
      width: calc(100vw-20px);
      height: calc(100vh - 30px);
      background: #fff;
      z-index: 1;
      overflow: hidden;
    }
    .searchBox{
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 2;
    }
    .searchBox #keyword{
      height: 30px;
      line-height: 30px;
      width: 260px;
      padding: 0 5px;
    }
    .searchResult{
      position: absolute;
      bottom: 50px;
      left: 30px;
      z-index: 2;
      height: 100px;
      width: 400px;
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      cursor: default;
    }
  </style>



</head>
<body>
<div id="mapContainer">
  <div class="searchBox">
    <input id='keyword' type="text" placeholder=" Please enter the query location ">
  </div>
  <div class="searchResult">
      <p>
        <span> Longitude and latitude :</span>
        <span id="lnglat"></span>
      </p>
      <p>
        <span> Address :</span>
        <span id="address"></span>
      </p>

  </div>
</div>


<div style="display: none">
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=${ Your map key value }&plugin=AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Geocoder"></script>
  <script src="http://webapi.amap.com/ui/1.0/main.js?v=202112071452"></script>
  <script>
   AMapUI.loadUI(['misc/PositionPicker'],PositionPicker => {
         //  Initialize the user area as the center point of the map 
         const mapConfig = {
              zoom: 15, //  Map zoom level 
              center: ['117.227237', '31.820513'], 
              lang: "zh_cn" 
            }
          let mapView = new AMap.Map('mapContainer', mapConfig);
           //  Construction point marker 
            // var m3 = new AMap.Marker({
            //   position: [117.224362,31.820447],
            //   icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
            // });
            // mapView.add(m3);
            // Drag and drop the map 
            var positionPicker = new PositionPicker({
            mode: 'dragMarker',//dragMap： Drag and drop the map ,dragMarker： Drag point 
            map: mapView,
            iconStyle: { // Custom look 
                url: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
                ancher: [24, 40],
                size: [24, 30]
            }
        });

        positionPicker.on('success', function (positionResult) {
            // Drag the successful callback  positionResult There is something you want 
            // console.log(' Drag and drop ',positionResult)
            document.getElementById('lnglat').innerHTML = positionResult.position.lng+ ','+positionResult.position.lat;
            document.getElementById('address').innerHTML = positionResult.address;
        });
        positionPicker.start();
        // Search tips 
        AMap.plugin('AMap.Autocomplete', function () {
          //  Instantiation Autocomplete
          var autoOptions = {
            city: ' Hefei ',
            input: "keyword"
          }
         var auto = new AMap.Autocomplete(autoOptions)
         var placeSearch = new AMap.PlaceSearch({
            pageSize: 5,
            pageIndex: 1,
            citylimit: false,
			     	map: mapView,
            city: ' Hefei ' // Default city 
		    	});
          AMap.event.addListener(auto, "select", select); // Register to listen , When a record is selected, it will trigger 
			    AMap.event.addListener(auto, "error", onError); // Register to listen , When a record is selected, it will trigger 
			// Analyze and locate the correct information 
			function select(e) {
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name); // Keyword query 
				var info = e.poi;// Geographic Information 
				console.log(info)
        document.getElementById('lnglat').innerHTML = info.location.lng+ ','+info.location.lat;
        document.getElementById('address').innerHTML = info.district+ info.address;
			}
			// Parse the location error message 
			function onError(data) {
				console.log(" seek failed ")
			}


    })

 })
  </script>
</div>
</body>
</html>

版权声明
本文为[A long summer]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204231742193129.html

边栏推荐

猜你喜欢

随机推荐