【微信小程序 + 高德地图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

相关推荐
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
HERR_QQ2 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀6 小时前
html初学者第一天
前端·html
速易达网络8 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码