高德地图 poi 搜索

原创已于 2022-04-25 10:27:20 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#高德地图

于 2022-04-25 10:25:02 首次发布

高德地图js 专栏收录该内容

17 篇文章

订阅专栏

<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/index.html -->
  <base href="//webapi.amap.com/ui/1.1/ui/misc/PoiPicker/examples/" />
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>输入框选择POI点</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0px;
      font-size: 13px;
    }

    #pickerBox {
      position: absolute;
      z-index: 9999;
      top: 50px;
      right: 30px;
      width: 300px;
    }

    #pickerInput {
      width: 200px;
      padding: 5px 5px;
    }

    #poiInfo {
      background: #fff;
    }

    .amap_lib_placeSearch .poibox.highlight {
      background-color: #CAE1FF;
    }

    .amap_lib_placeSearch .poi-more {
      display: none !important;
    }
  </style>
</head>

<body>
  <div id="container" class="map" tabindex="0"></div>
  <div id="pickerBox">
    <input id="pickerInput" placeholder="输入关键字选取地点" />
    <div id="poiInfo"></div>
  </div>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=a8daa4fcd4baa46ce1128c3a79f6e29b"></script>
  <!-- 搜索UI组件库 1.0 -->
  <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
  <script type="text/javascript">

    var map = new AMap.Map('container', {
      zoom: 10
    });

    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {

      var poiPicker = new PoiPicker({
        city: '上海',
        input: 'pickerInput'
      });

      //初始化poiPicker
      poiPickerReady(poiPicker);
    });

    function poiPickerReady (poiPicker) {

      window.poiPicker = poiPicker;

      //选取了某个POI
      poiPicker.on('poiPicked', function (poiResult) {

        var source = poiResult.source,
          poi = poiResult.item,
          info = {
            source: source,
            id: poi.id,
            name: poi.name,
            location: poi.location.toString(),
            address: poi.address
          };

        console.log(info)
      });

    }
  </script>
</body>

</html>