JSAPI 高德地图应用--关键字搜索、POI搜索定位，获取经纬度

最新推荐文章于 2025-01-11 11:12:33 发布

芒果很忙_z

最新推荐文章于 2025-01-11 11:12:33 发布

阅读量9.8k

点赞数 3

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wo_1021/article/details/118971981

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何利用高德地图API实现搜索定位功能，结合AMap.Autocomplete和AMap.PlaceSearch插件，实现输入提示和POI搜索。同时，通过AMap.MouseTool插件，展示了如何在地图上添加定位点、绘制线、多边形、矩形和圆形，并获取其经纬度坐标。此外，还提供了清除绘制覆盖物的方法和保存绘制数据的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在高德地图的应用中，地图上总少不了搜索框，用于搜索并定位某一位置，并获取某一定位点的经纬度，类似于这种：

这种搜索方法一般是高德地图的输入提示插件AMap.Autocomplete和POI搜索插件AMap.PlaceSearch结合来实现的；

首先需要定义一个input输入框，并赋予id，id是关键，至于输入框放置位置，可以自己调节

  <input id='tipinput' type="text">

因为这两个都是高德地图的插件，所有需要引入进来

      AMap.plugin([ 'AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
       

        var autoOptions = {
          city: '全国', //city 限定城市，默认全国
          input: 'tipinput',//绑定的输入框id
        }
        const autoComplete = new AMap.Autocomplete(autoOptions)

        placeSearch = new AMap.PlaceSearch({
          city: '全国',
          map: self.map,
          citylimit: true,
          autoFitView: true
        })
        AMap.event.addListener(autoComplete, 'select', (e) => {
          //TODO 针对选中的poi实现自己的功能
          placeSearch.setCity(e.poi.adcode) 
          placeSearch.search(e.poi.name)
        })

      })

搜索到某一区域后，如果想要在地图上添加某一定位点，需要添加地图的绘制工具：AMap.MouseTool，引入方式跟上方一样，可以添加一个btn来调用drawMarker的方法

   AMap.plugin(['AMap.MouseTool'], () => {
       
       mouseTool = new AMap.MouseTool(map)
      

        // 绘制覆盖物
       mouseTool.on('draw', (e) => {
          overlays.push(e.obj)
           console.log('定位点的经纬度',e.obj.getPosition())
         //获取定位点的经纬度使用e.obj.getPosition()

      })

   // 绘制点
    drawMarker () {
      mouseTool.marker({})
    },

这个时候就获取到定位点的经纬度了，可以传给后端进行保存，可以添加表单填写其他信息，用于之后初始化定位点，在地图上进行渲染，可以参照之前的文章：JSAPI 高德地图应用---批量初始化点标记、矢量图形

如果想要绘制其他矢量图形的话，方法类型，但是获取经纬度的方法会有些差距，见代码：

    // 绘制线
    drawPolyline () {
      mouseTool.polyline({
        strokeColor: '#80d8ff',
      })
    },
    // 绘制多边形
    drawPolygon () {
      mouseTool.polygon({
        fillColor: '#f21e2b33' ,//填充颜色
        strokeColor:'#00a4ff',//描边颜色
      })
    },
    // 绘制矩形
    drawRectangle () {
      mouseTool.rectangle({
        fillColor:  '#00a4ff33',
        strokeCollor: '#00a4ff',
      })
    },
    // 绘制圆形
    drawCircle () {
      mouseTool.circle({
        fillColor:  '#f21e2b33',
        strokeCollor:  '#F21E2B',
      })
    },

        // 绘制覆盖物
       mouseTool.on('draw', (e) => {
          overlays.push(e.obj)    
          console.log('获取圆的圆心经纬度',e.obj.getCenter())
          console.log('获取圆的半径，单位是米',e.obj.getRadius())
          console.log('获取多边形、矩形、线的经纬度集合，是一个数组，按点依次排列',e.obj.getPath()) 

        })

上面的overlays是保存绘制覆盖物的数据，如果想要清除绘制的覆盖物直接 map.remove(overlays)即可。