uniapp - 微信小程序利用腾讯地图插件实现搜索地点/位置功能，uniapp小程序平台端使用腾讯地图做搜索城市位置+底部自动根据关键字联想其他相关位置（详细示例源码，一键复制开箱即用！）

已于 2024-05-10 09:47:33 修改
阅读量3k 收藏 14
点赞数 13
分类专栏： 前端组件与功能(开箱即用) 文章标签： uniapp 微信小程序 腾讯地图 uniap使用腾讯地图搜索功能 腾讯地图搜索框搜索城市名称地点 unia小程序搜索联想相关城市 uniapp微信小程序官方教程
于 2023-12-26 17:06:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/135116258
版权

效果图

在uniapp微信小程序开发中，安装使用腾讯地图插件，并利用腾讯地图功能完成目的地、城市位置、名称等搜索功能，并且在下拉框中自动 “联想” 相关的地点位置。

uniapp Vue3和Vue2都能用，最终效果图有点模糊，你可以按照教程一路复制就可以搞定了。

在这里插入图片描述

一：准备开始

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 13
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
如何为微信小程序添加地理位置标记和地点搜索功能
吃不胖.
03-31 790
通过以上步骤，您可以在微信小程序中实现地理位置标记和地点搜索的功能。1.2 展示地图和添加标记： 在小程序中展示地图和添加标记需要使用到微信小程序的插件，推荐使用腾讯地图插件。要在微信小程序中添加地理位置标记功能，首先需要获取用户的地理位置信息，然后将其展示在小程序的地图上，并在地图上添加标记。以上代码中，markers数组用于存储地图上的标记信息，包括标记的经纬度、标题、图标等，可以根据实际需求进行修改。以上代码中，places是存储地点信息的集合名，title是存储地点名称的字段。
【uniapp+腾讯地图实现位置搜索，并将该经纬度转换成地点，传给后台存到库里，供pc展示定位】
demotang的博客
05-30 769
uniapp+腾讯地图实现位置搜索，并展示当前位置
uni-app小程序中使用腾讯地图完成搜索功能
qq_61827376的博客
07-30 999
【代码】uni-app小程序中使用腾讯地图完成搜索功能。
需求:微信小程序使用腾讯地图，做地点搜索！（完整版）
m0_45834373的博客
06-07 2253
第二步：接下来就可以写代码了，这里就没什么好说的了，直接参考：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch。注意：上面勾选的都是必填的，要想使用地点搜索，就需要配置授权IP，可以参考文档https://lbs.qq.com/faq/serverFaq/webServiceKey。开发者管理—开发设置—服务器域名request添加https://apis.map.qq.com。
如何为微信小程序添加地理位置标记和地点搜索功能【含代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-22 1176
在微信小程序开发中，集成地理位置标记和地点搜索功能可以极大地丰富用户体验，特别是在旅游、餐饮、生活服务类应用中。通过上述示例与技巧，开发者可以轻松地在微信小程序中集成地理位置标记和地点搜索功能，提升应用的实用性和用户互动体验。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。地点搜索功能允许用户输入关键词，小程序根据输入查询相关的地点信息，如商家、景点、城市等，返回匹配结果。，为我们广大开发同胞谋福祉，
微信小程序引入腾讯地图图解
Ronion123的博客
10-17 3370
> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com。7.下载后引入qqmap-wx-jssdk.js文件到components文件夹中。4.点击创建应用，随意输入,点击创建就创建完成了，然后点击添加key。5.勾选webServiceAPI和微信小程序，填入需要的内容。填写信息-登录邮箱激活-信息登记。2.完成后，就会进入这个页面。2.注册完成后，点击控制台。3.点击应用管理-我的应用。8.创建微信小程序页面。
uniapp微信小程序地图实现绘制polygon（保姆级教程 全网最全！！！）
逆水行舟 不进则退
12-01 4402
uniapp微信小程序中在map上实现polygon的绘制。全网最全保姆级教程，不会你来砸我！！！
uniapp手写地图搜索选取功能
fbqgdxw的博客
01-06 1540
A.vue: <template> <view> <button @tap="detailed">跳转地图搜索页</button> </view> <script> export default{ data(){ return{ longitude:'',//经度 l
uniapp&&微信小程序中打开腾讯地图获取用户位置信息
次顶级的博客
08-04 2144
uniapp&&微信小程序中打开腾讯地图获取用户位置信息，获取用户详细地址文字信息小程序
腾讯地图系列（二）：微信小程序添加插件（三种方法）以及插件AppId获取
qq_45796592的博客
12-05 3740
微信小程序添加插件
uniapp开发小程序解析经纬度获取当前位置信息（腾讯地图二）
weixin_53339757的博客
03-27 6737
uniapp开发小程序解析经纬度换取详细中文地址
微信小程序（五）地图
m0_69270256的博客
12-18 5192
作者开发《目的地到了》需要满足用户选取地址作为目的地的需求，所以需要使用到地图。作者用的是腾讯地图，这里介绍下技术实现。
【uniapp 小程序】解决 map 组件出现标点（地图）自动偏移或 @regionchange 频繁触发的问题
Brod-Roy的博客
11-16 2340
在业务开发中出现了地图的中心标点向右侧缓慢移动的问题，在我解决后又发现了 @regionchange 方法出现了无限调用的问题。 本文仅解决与我相似的问题以做参考，并会附上对应的问题与参考的博客。
uniapp中进行地图定位
逆水行舟 不进则退
11-29 1714
在uniapp+微信小程序中实现地图定位并获取地名地址信息
如何在微信小程序中使用高德地图api查询附近周边信息并标志多处位置（uniapp）
NSX-Truth
06-23 7930
1. 前言 这是本人毕业设计中其中一个功能点，就是用户在微信小程序（使用uniapp框架）中的运动模块中有个选项卡可以查询附近健身房。我尝试过使用腾讯地图、百度地图和高德地图的api来实现此功能，前两者（腾讯、百度）都以失败告终（无法显示出健身房位置标记），大概是自己菜吧 ????????????。 为了使读者们避免踩更多的坑以及记录一下自己怎么实现这个功能，我有必要总结一下。???????????? 2. 实现效果（最后放个演示视频吧） 上图，可以看到显示我当前位置的附近有哪些健身房，我自定义了最多显示
微信小程序内添加腾讯地图 导航
魏依一的博客
04-13 1710
4、加入路线规划插件后，地图在微信开发者工具中是动态的，在真机上没事，解决方法：将开发者工具版本调低2.11之前。问题：提示添加失败 项目主体不符的，可以通过 服务---》微信服务市场--》搜索--》1、微信小程序---》设置---》第三方设置-----》插件管理----》添加插件。2、登录腾讯地图申请小程序key 应用管理--》我的应用--》添加key。3 、腾讯地图插件文档。
uniapp开发小程序获取定位信息（腾讯地图）
weixin_62639453的博客
02-06 5354
定位一直是一个让人头疼的问题，不是这个有问题就是那里有问题。这里结合我多方查找和实际运行，获得的一些经验给予分享。
uniapp：谷歌地图，实现地图展示，搜索功能，H5导航
sunluyi的博客
10-26 1791
uniapp实现谷歌地图，地图展示及搜索
uniapp做微信小程序，实现将图片做成地图功能
05-25
可以使用uniapp的地图组件来实现将图片做成地图功能。具体的步骤如下： 1. 在uniapp中引入地图组件 在uniapp的页面中，可以引入uniapp自带的地图组件，代码如下： ``` <template> <view class="map"> <map :longitude="longitude" :latitude="latitude" :markers="markers" :covers="covers" style="width: 100%; height: 100%;"></map> </view> </template> <script> import uniMap from '@/components/uni-map/uni-map.vue' export default { components: { uniMap }, data () { return { longitude: 116.397128, latitude: 39.916527, markers: [{ id: 0, longitude: 116.397128, latitude: 39.916527, title: 'Marker', iconPath: '/static/map/marker.png', width: 50, height: 50 }], covers: [] } } } </script> ``` 2. 将图片转换成地图 将图片转换成地图需要借助第三方API，比如阿里云地图API、腾讯地图API等，这里以阿里云地图API为例，具体的步骤如下： （1）在阿里云地图API上创建一个应用，获取到应用的AppCode。 （2）使用uniapp的网络请求API，将图片上传到阿里云OSS，并获取到图片的URL。 （3）将图片的URL作为参数，调用阿里云地图API的静态地图API，获取地图图片，并将图片显示在地图上。 具体的代码实现如下： ``` <template> <view class="map"> <map :longitude="longitude" :latitude="latitude" :markers="markers" :covers="covers" style="width: 100%; height: 100%;"></map> </view> </template> <script> import uniMap from '@/components/uni-map/uni-map.vue' import { request } from '@/utils/request' export default { components: { uniMap }, data () { return { longitude: 116.397128, latitude: 39.916527, markers: [{ id: 0, longitude: 116.397128, latitude: 39.916527, title: 'Marker', iconPath: '/static/map/marker.png', width: 50, height: 50 }], covers: [] } }, mounted () { this.getMap() }, methods: { async getMap () { try { // 1. 将图片上传到阿里云OSS，获取图片的URL const res = await uni.uploadFile({ url: 'https://oss-cn-hangzhou.aliyuncs.com', filePath: '/static/map/map.jpg', name: 'file', formData: { key: 'map.jpg', policy: '', OSSAccessKeyId: '', success_action_status: '200', signature: '' } }) const url = `https://xxx.aliyuncs.com/${res.data.key}` // 2. 调用阿里云地图API，获取地图图片 const appCode = 'xxxxxx' const { data } = await request({ url: `https://restapi.amap.com/v3/staticmap?location=${this.longitude},${this.latitude}&zoom=10&size=750*400&markers=mid,,A:${this.longitude},${this.latitude}&key=${appCode}&icon=${url}` }) // 3. 将地图图片显示在地图上 this.covers = [{ id: 0, longitude: this.longitude, latitude: this.latitude, iconPath: data, width: 750, height: 400 }] } catch (error) { console.log(error) } } } } </script> ``` 以上就是使用uniapp实现将图片做成地图功能的全部步骤。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值