高德地图实现点击地图添加标记，通过输入框搜索详细地址自动定位到指定位置-CRMEB社区

高德地图实现点击地图添加标记，通过输入框搜索详细地址自动定位到指定位置

管理

编辑

删除

高德地图api版本：JavaScript API V2.0.0

用高德地图实现输入搜索地址添加标记，鼠标移动标记来获取当前该点的经纬度，详细地址

1. 高德地图的页面构建：首先先引入高德地图，增加自己想要的功能，我们这里需要一个输入联想框

2. 高德地图的Api来实现相关功能

1. 构建地图

  initMap() {
      const that = this
      return new Promise((reslove, reject) => {
        AMapLoader.load({
          key: 'cf5c437b14780406af75a81b380cafac',
          version: '2.0',
          plugins: [
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.Geocoder',
            'AMap.Geolocation',
            'AMap.PlaceSearch',
            'AMap.AutoComplete',
            'AMap.CitySearch'
          ],
          resizeEnable: true
        }).then((AMap) => {
          that.map = new AMap.Map('allmap', {
            resizeEnable: true,
            zoom: 14,
            viewMode: '3D', //使用3D视图
            center: [that.positionInfo.lng, that.positionInfo.lat]
          })
          that.getCurrentLocation()
          that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          that.geocoder = new AMap.Geocoder({ radius: 1000, extensions: 'all', city: '全国' })
          that.mapSearchInit()
          that.geocoder.getAddress([that.positionInfo.lng, that.positionInfo.lat], function (status, result) {
            if (status === 'complete' && result.regeocode) {
              that.address = result.regeocode.formattedAddress
            } else {
              that.$message.error('根据经纬度查询地址失败')
            }
          })
        })
      })
    },

2. 根据输入框内容搜索地点，经纬度

  searchKeyWord() {
      let that = this
      that.placeSearchComponent.search(that.address, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          that.show = true
          // 关键字联想的选项内容
          that.poiList = result.poiList.pois
        } else {
          that.showsearchResult = false
          that.poiList = []
          that.$message({
            message: '没有查到结果',
            type: 'warning'
          })
        }
      })
    },

3. 动态设置点标记，构造矢量圆形

 dynamicSign(lng, lat, radius) {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(lng, lat), //参数为经纬度
        draggable: true,
        cursor: 'move',
        riseOnHover: true,
        bubble: true,
        cursor: 'pointer'
      })
      // 构造矢量圆形
      const circle = new AMap.Circle({
        center: new AMap.LngLat(lng, lat), // 圆心位置
        radius: radius, //半径
        strokeColor: '#1890ff', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线粗细度
        fillColor: '#1890ff', //填充颜色
        fillOpacity: 0.35 //填充透明度
      })
      this.map.clearMap()
      this.map.add([marker, circle]) // 添加点标志
      marker.on('dragend', this.markerClick)
    },

高德地图api接口比较丰富，大多的需求都能实现。本次主要使用了POI搜索插件AMap.PlaceSearch，获取城市信息AMap.getCityInfo，设置标记点AMap.Marker，构造矢量图AMap.Circle结合了带列表的POI搜索的这个,再将监听事件改为列表点选的selectChange事件，获得当前点选地点经纬度，这样将二者进行了组合一下实现了以上的搜索以及展现方式。