学做蛋糕什么网站,上传电影网站源码,南宁网站建设工具,网站建设与开发英文文献前言
又到熟悉的前言#xff0c;接到个需求#xff0c;要引入高德地图api#xff0c;我就记录一下#xff0c;要是有帮助记得点赞、收藏、关注#x1f601;。 后续有时间会慢慢完善一些文章#xff1a;#xff08;画饼时间#xff09;
map组件自定义气泡、mark标记点…前言
又到熟悉的前言接到个需求要引入高德地图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 mapidmap:longitudecenter.longitude:latitudecenter.latitude:markersmarkers:scalemapScaleregionchangeonRegionChangemarkertaponMarkerTapshow-location:layer-stylelayerStyleIdclassmap/map引入sdk申明变量
script setup
import { onMounted } from vue;
import amapFile from ../../utils/amap-wx.130.jsconst mapScale ref(5) // 初始缩放级别全国视图
const layerStyleId ref(你的keys) //在高德上申请的keysearchMap () {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
