高德地图自定义搜索

最近在开发E都市地图功能，其中用到 了[高德地图]关键字查询

脚本依赖如下：

<script src="lib/jquery.js"></script>

<script src="http://webapi.amap.com/maps?v=1.4.0&key=de36f22956d5dfcd77e1f32c33200356&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow,AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Walking,AMap.DragRoute"></script>

// 参数说明：
// key填写你申请的key值
// plugin对应需要的地图插件

// 例如：
// new AMap.Autocomplete
// new AMap.PlaceSearch

html code：

<div id="container" class="map-container"></div>

<div id="mapPanel" class="map-panel"></div>

<div class="button-search">
  <input id="keyword" class="inputtext" placeholder="请输入关键字" type="text">
  <input id="query" class="button" value="搜索" type="button">
</div>

javascript code：

  var map = new AMap.Map("container", {
    resizeEnable: true
  });

  //输入提示
  var auto = new AMap.Autocomplete({
    input: "keyword"
  });

  //构造地点查询类
  var placeSearch = new AMap.PlaceSearch({
    map: map,
    pageSize: 5,
    pageIndex: 1,
    panel: "mapPanel",
    city: "杭州"    //城市
  });

  //注册监听，当选中某条记录时会触发
  AMap.event.addListener(auto, "select", function (ev) {
    placeSearch.setCity(ev.poi.adcode);
    placeSearch.search(ev.poi.name);    //关键字查询
  });

  window.onload = function() {
    map.plugin(["AMap.ToolBar"], function() {
      map.addControl(new AMap.ToolBar());
    });

    if(location.href.indexOf('&guide=1')!==-1){
      map.setStatus({scrollWheel:false})
    }

    var input = $('#keyword');
    var query = $('#query');
    var text = null;

    input.keydown(function (ev) {
      if(ev.keyCode===13){
        text = $(this).val();
        placeSearch.search(text);//关键字查询
      }
    });

    query.on('click',function () {
      text = input.val();
      placeSearch.search(text);//关键字查询
    });

    $('body').on('click','.auto-item',function () {
      text = $(this).html().substr(0,$(this).html().indexOf('<span'));
      placeSearch.search(text);//关键字查询
    });
  };

css code：

    .map-container{
      position: absolute;
      left: 0;
      right: 0;
      top:0;
      bottom: 0;
      z-index: 100;
    }
    .map-panel {
      width: 314px;
      max-height: 100%;
      overflow-y: auto;;
      background-color: white;
      position: absolute;
      top: 74px;
      left: 130px;
      z-index: 200;
    }
    .button-search{
      padding: 10px;
      font-size: 12px;
      position: absolute;
      top: 20px;
      left: 120px;
      z-index: 200;
    }
    .button-search .inputtext {
      width: 300px;
      height: 36px;
      line-height: 30px;
      border: 1px;
      outline: none;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      margin-bottom: 4px;
    }
    .button-search .button {
      width: 50px;
      height: 36px;
      line-height: 30px;
      background-color: #0D9BF2;
      color: #FFF;
      border: 0;
      outline: none;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      margin-bottom: 4px;
      cursor: pointer;
    }