阿里地图选择器的使用指南(阿里云地图选择器)

阿里地图选择器是一款实用的地图工具，可以帮助开发者在网站或APP中方便地选择并标注位置信息。本篇文章将从使用方法、功能特性、代码示例三个方面对阿里地图选择器进行详细介绍。

一、使用方法

使用阿里地图选择器，需要引入对应的JavaScript API，并创建一个地图实例。在实例化过程中，还需要指定地图的中心点和缩放级别。创建成功后，在地图上添加选择器控件即可。对于选择器控件，可以设置其默认位置、尺寸和样式，以及响应其回调方法获取用户手动选择的位置信息。

示例代码

//引入阿里地图API
<script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>

//创建地图实例
var map = new AMap.Map('container', {
  center: [116.397428, 39.90923],   //地图中心点
  zoom: 13                          //缩放级别
});

//添加选择器控件
var placeSearch;
var marker;
map.plugin('AMap.PlaceSearch', function () {
  placeSearch = new AMap.PlaceSearch({
    pageSize: 5,
    pageIndex: 1,
    map: map,
    panel: "panel"
  });

  var auto = new AMap.Autocomplete({
    input: "tipinput"
  });
  AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
  AMap.event.addListener(placeSearch, "selectChanged", selectChanged);//注册监听，当选中某条记录时会触发
  placeSearch.searchNearBy('', [116.397428, 39.90923], 1000);
  function select(e) {
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);
  }
  function selectChanged() {
    var poi = placeSearch.getSelectedPOI();
    if (!poi) {
      return;
    }
    map.setZoom(14)
    map.panTo([poi.location.lng, poi.location.lat])
  }
});

二、功能特性

阿里地图选择器具备多种方便快捷的功能特性，包括：

1、地图展示和缩放控制

在选择器中，可以直接展示地图，并对地图的缩放级别进行放大或缩小。用户可以通过拖拽地图或者操作缩放控制按钮，快速切换视图，并精准选择目标位置。

2、位置搜索和标注

选择器控件支持位置搜索，用户可以在搜索框中输入目标位置的名称或拼音，即可在地图上更精准地定位。

同时，阿里地图选择器还支持位置标注功能。当用户在地图上选定了目标位置后，控件会自动标注地点，并返回具体的地理位置信息，包括地址、坐标、区域等信息。

3、控件样式和位置自定义

阿里地图选择器提供了多种可自定义的样式和位置参数，让用户能够更好地匹配自己的应用场景。比如，可以设置搜索框和标注图标的颜色、大小、形状等，以及选择器控件的位置、尺寸、边距等。

三、代码示例

下面是一个完整的使用示例，包括HTML页面布局和JavaScript代码实现：

1、HTML页面布局





  
  阿里地图选择器示例
  <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>



  
  <input type="text" id="tipinput" placeholder="请输入目标位置">

2、JavaScript代码实现

var map = new AMap.Map('container', {
  center: [116.397428, 39.90923],
  zoom: 13
});

var placeSearch;
var marker;
map.plugin('AMap.PlaceSearch', function () {
  placeSearch = new AMap.PlaceSearch({
    pageSize: 5,
    pageIndex: 1,
    map: map,
    panel: "panel"
  });

  var auto = new AMap.Autocomplete({
    input: "tipinput"
  });
  AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
  AMap.event.addListener(placeSearch, "selectChanged", selectChanged);//注册监听，当选中某条记录时会触发
  placeSearch.searchNearBy('', [116.397428, 39.90923], 1000);
  function select(e) {
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);
  }
  function selectChanged() {
    var poi = placeSearch.getSelectedPOI();
    if (!poi) {
      return;
    }
    map.setZoom(14)
    map.panTo([poi.location.lng, poi.location.lat])
  }
});

四、结语

本文介绍了阿里地图选择器的使用方法和功能特性，希望能对开发者在地图选址方面提供有益的帮助。在使用过程中，如果遇到任何问题和bug，请及时与阿里工程师联系。谢谢！