高德地图API搜索地址列表实例演示

  • 1546
  • 1
  • 0


搞的地图演示搜索地名API

  1. <script>
  2. //初始化地图
  3. var map = new AMap.Map('container', {
  4.   resizeEnable: true, //是否监控地图容器尺寸变化
  5.   zoom: 11, //初始地图级别
  6. });
  7. var geocoder,marker,lnglat;
  8. function regeoCode() {
  9.         if(!geocoder){
  10.                 geocoder = new AMap.Geocoder({
  11.                         city: "010", //城市设为北京,默认:“全国”
  12.                         radius: 1000 //范围,默认:500
  13.                 });
  14.         }
  15.          if(!marker){
  16.                 marker = new AMap.Marker();
  17.                 map.add(marker);
  18.         }
  19.         marker.setPosition(lnglat);
  20.        
  21.         geocoder.getAddress(lnglat, function(status, result) {
  22.                 if (status === 'complete'&&result.regeocode) {
  23.                         var address = result.regeocode.formattedAddress;
  24.                         document.getElementById('address').value = address;
  25.                 }else{
  26.                         log.error('根据经纬度查询地址失败')
  27.                 }
  28.         });
  29. }

  30. map.on('click',function(e){
  31.         lnglat = e.lnglat;
  32.         regeoCode();
  33. })
  34. // 获取输入提示信息
  35. function autoInput(){
  36.   var keywords = document.getElementById("input").value;
  37.   AMap.plugin('AMap.Autocomplete', function(){
  38.         // 实例化Autocomplete
  39.         var autoOptions = {
  40.           city: '全国'
  41.         }
  42.         var autoComplete = new AMap.Autocomplete(autoOptions);
  43.         autoComplete.search(keywords, function(status, result) {
  44.           // 搜索成功时,result即是对应的匹配数据
  45.           console.log(result);
  46.           let tips = result.tips;
  47.           let tishtml = "";
  48.           tips.forEach((item)=>{
  49.                 tishtml+=`<span lat="${item.location.lat}" lng="${item.location.lng}">${item.name}</span>`
  50.           })
  51.           $("#input-info").html(tishtml);
  52.         })
  53.   })
  54. }

  55. autoInput();

  56. document.getElementById("input").oninput = autoInput;
  57. $("#input-info").on("click",'span',function(){
  58.         let lat = $(this).attr("lat");
  59.         let lng = $(this).attr("lng");
  60.         map.panTo([lng, lat]);
  61.         lnglat=[lng, lat];
  62.         regeoCode();
  63. })
  64. </script>
复制代码


本素材被以下收藏专辑推荐:

  • 地图|素材: 15, 订阅: 0
高德地图API搜索地址列表实例演示
  • 奎1974 刚刚下载了一个素材
  • ���百事 刚刚下载了一个素材
  • ���, 刚刚下载了一个素材
  • 莫莫莫 刚刚下载了一个素材
  • 小秀才 刚刚下载了一个素材
  • 喜欢泡泡 刚刚下载了一个素材
  • 大白不够白 刚刚下载了一个素材
  • 平凡之路2048 刚刚下载了一个素材
  • qqSg84 刚刚下载了一个素材
  • 尾崎八项走起! 刚刚下载了一个素材
  • 一平 刚刚下载了一个素材
  • 哎哟薇 刚刚下载了一个素材
  • ZZ4314 刚刚下载了一个素材
  • Mrmysterious 刚刚下载了一个素材
  • Arrebol22255 刚刚下载了一个素材
分享者:
分享者头像
zhihuoban
热门素材推荐
HTML素材网,HTML5模板,网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5
返回顶部返回顶部
发布主题