【微信小程序 + 高德地图API 】键入关键字搜索地址，获取经纬度等

news2025/5/20 16:54:52

前言

又到熟悉的前言，接到个需求，要引入高德地图api，我就记录一下，要是有帮助记得点赞、收藏、关注😁。
后续有时间会慢慢完善一些文章：（画饼时间）

map组件自定义气泡、mark标记点
后台管理系统如何引入高德地图，静态图 + 搜索地址获取经纬度
把这几篇连在一起（小程序的大部分出完，就给大家编辑个快速通道，其余的大家就先自己点专栏了哈）

高德地图入门指南：https://lbs.amap.com/api/wx/gettingstarted

一、准备工作

1. 申请地图 API 密钥

若使用 腾讯地图（微信小程序原生支持）：
前往腾讯位置服务控制台申请 API 密钥（Key），并在微信小程序后台配置「合法域名」（apis.map.qq.com 等）。
若使用 高德地图：
前往高德开放平台申请小程序 SDK 密钥，并下载高德微信小程序 SDK。

2. 高德地图申请key

到高德开发平台

官网直通道：https://lbs.amap.com/

在这里插入图片描述

3. 下载微信小程序SDK

我下载的时候是： AMapWX_SDK_V1.3.0

官网直通道：https://lbs.amap.com/api/wx/download

在这里插入图片描述
解压后得到：amap-wx.js ，你可以按照你的习惯放文件，我是放到小程序的utils文件夹下：

4.配置小程序服务器域名

登录微信公众平台，在 “设置”－>“开发设置” 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去。

微信公众平台：https://mp.weixin.qq.com/

在这里插入图片描述

二、封装自己的Map 组件

先确定自己的需求要求什么程度，再定义一下自己的组件。

map组件官网通道：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

这边就按照我的需求来咯，再阐述一下吧：

1. 需求明确

在页面上键入关键字，模糊查询出相关的地址信息，用户在下拉框内选择详细地址，则在地图上标记出来。
在这里插入图片描述

2. 代码实现

map 组件封装，属性的说明如图：

在这里插入图片描述

官网直通车： https://developers.weixin.qq.com/miniprogram/dev/component/map.html

   <map
     id="map"
     :longitude="center.longitude"
     :latitude="center.latitude"
     :markers="markers"
     :scale="mapScale"
     @regionchange="onRegionChange"
     @markertap="onMarkerTap"
     show-location
     :layer-style="layerStyleId"
     class="map"
   >
   </map>

引入sdk，申明变量

<script setup>
import { onMounted } from 'vue';
import amapFile from '../../utils/amap-wx.130.js'

const mapScale = ref(5) // 初始缩放级别：全国视图
const layerStyleId = ref('你的keys') //在高德上申请的key

searchMap = () => {
    let searchText = '键入的值'
    let myAmapFun = new amapFile.AMapWX({
      key: layerStyleId   
    })
    let that = this
    //根据关键词，给出相应的提示信息
    myAmapFun.getInputtips({  
      keywords: searchText,
      success: function (res) {
        console.log('success ---  这就是符合地址信息的多个地址了', res.tips[0].location)
       
      },
      fail: function (fail) {
        console.log('err', fail)
      }
    })
  }
</script>