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

前言

又到熟悉的前言,接到个需求,要引入高德地图api,我就记录一下,要是有帮助记得点赞、收藏、关注😁。

后续有时间会慢慢完善一些文章:(画饼时间)

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

高德地图入门指南: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

typescript 复制代码
   <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,申明变量
typescript 复制代码
<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>

官网接口文档,快速通道:https://lbs.amap.com/api/wx/reference/core#t7

官网接口字段说明文档:https://lbs.amap.com/api/webservice/guide/api-advanced/inputtips

POI分类列表,下载地址: https://lbs.amap.com/api/webservice/download

相关推荐
编程猪猪侠17 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞21 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路43 分钟前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架