uniapp h5接入地图选点组件

uniapp地图选点定位h5 在uniapp中简单使用地图的方法 阅读详情
AI摘要

该博客介绍了UniApp H5接入地图选点组件的方法。首先需登录腾讯位置服务控制台,创建应用并添加地图key,同时要对key做配额管理。接着进行代码接入,包括入口页面和选点页面的template与script部分,若实际开发页面不同,入口页面跳转方式需自行调整。


该内容只针对uniapp 打包h5接入地图选点组件做详细说明,如需详细的微信小程序接入地图选点插件,请查阅 uni-app/微信小程序接入腾讯位置服务地图选点插件

1、申请腾讯地图key

文档中提到需要一个地图key,首先登录腾讯位置服务控制台,点击左侧应用管理,创建应用,再添加key。
在这里插入图片描述
在这里插入图片描述
创建完key之后,要记得对key 做配额管理,不然在应用中,会提示获取消息列表失败

2、代码接入

2.1入口页面 (pages/map/map)

本页面为tabBar页面,若实际开发页面不同,则跳转方式自行调整
在这里插入图片描述

template

<template>
	<view>
		<button @click="open">打开地图选点</button>
		<view v-if="info">
			<text>地址:{{info.poiaddress}}</text>
			<text>坐标:{{info.latlng.lat}}, {{info.latlng.lng}}</text>
		</view>
	</view>
</template>

script

export default {
		data() {
			return {
				info: null
			}
		},
		methods: {
			show(data){
				console.log(data)
				this.info = data
			},
			open() {
				uni.navigateTo({
					url:'/pages/map/mapselect/mapselect'
				})
			}
		},
		onLoad(options) {
			console.log('加载监听获取经纬度的方法')
			uni.$on('loc',this.show)
		},
		onUnload(){
			console.log('卸载获取经纬度的方法')
			uni.$off('loc')
		}	
	}

2.2选点页面(pages/map/mapselect/mapselect)

在这里插入图片描述

template

<template>
	<web-view :src="mapurl"></web-view>
</template>

script

<script>
	export default {
		data() {
			return {
				mapurl:''
			}
		},
		onLoad(option) {
			this.mapurl = 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key={申请过来的key}&referer=myapp'
		},
		onReady() {
			if (window.isListen) {
				return
			}
			window.addEventListener('message', function(event) {
				// 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
				var loc = event.data;
				if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
					console.log('location', loc);
					//将获取的值通过消息传回给父页面
					uni.$emit('loc',loc)
					uni.switchTab({
						url:"/pages/map/map?source=true"
					});
				}
				window.isListen = true
				window.removeEventListener('message', function() {}, true)
			}, false);
		},
		methods: {},
	}
</script>
【Uniapp 附项目】腾讯地图的导入、定位、自定义标点与信息窗体、区域绘制的使用 之前做过一个高德地图接入,功能基本一致,本文使用腾讯地图完成了相关功能,比高德地图多了一个区域的绘制功能。本文除了功能使用外还会讲解一些两者的异同。 阅读详情

相关推荐

uniapp app端使用谷歌地图选点定位

app端使用谷歌地图 实现选点定位

VueJiang的博客 3202

uni-app使用腾讯地图的-地图选点组件

需求:在H5实现地图选点功能 使用:腾讯地图的开放地图选点组件 步骤: 1、官方文档有详细介绍https://lbs.qq.com/tool/component-picker.html 2、个人操作步骤: 申请你的key 官方地址:https://lbs.qq.com/guides/startup.html 在index.html 设置 <meta name="v...

star星辉的博客 1万+

分享uniapp移动端和h5项目如何使用谷歌地图

基于uniapp + vue2 的APP端项目使用谷歌地图的注意点。

qq_51185865的博客 3347

uni-app中实现位置授权以及打开地图选择位置功能

注意点:this的指向问题,是否指向vc决定你能否拿到data里面的数据。

JunVei的博客 1418

uniapp接入高德地图

1.在高德开放平台提交资料,获取key,代码里写小程序的key值,uniapp的manifest.json中的APP SDK配置,android,ios分别写各自的key。 2.引入高德sdk amap-wx.js,我接入的是微信小程序的sdk,android,ios上都支持。 function AMapWX(a){this.key=a.key,this.requestConfig=...

msy_msy的博客 1万+

uniapp H5端使用高德地图完成路线规划

首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1、准备工作,会提示你先引入下边这块代码 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 我的项目是uniapp项目,在自定义的html引入会报错,个人感觉可能是加载顺序的问题,最后修改成 import maps from '.

sunluyi的博客 1万+

uniapp H5 实现地图选址功能

这段时间因为项目中使用到地图选址,由于第一次在uniapp中使用地图选址功能,全部都是网上查找相关资料,遇到很多坑,后面自己从新利用map组件写了一个,下面方法列出来,uniapp腾讯地图key申请与部署就不写了,自行百度,仅供参考。...

m0_56551688的博客 7279

uniapp,map地图组件打包原生APP

准备工作 1、申请高德地图key 进入高德地图API,登录账号,选择控制台 > 我的应用 > 创建新应用 提交后,将你的key复制到HX得manifest.json文件,如下图 红框标注的两项记得勾选,填入申请好的key 2、sha1申请 如何申请sha1,参考该博客 HBuilderX云端打包选择“公共测试证书”时,SHA1值为:BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7 这个值不论是基座运行还是正式包.

sunluyi的博客 5886

uniapp使用天地图做一个地图选点

首先需要获取当前经纬度,来进行在地图上的标点,我是在别的页面获取的经纬度传过来,所以这里就没有获取经纬度的方法,自己写一个方法即可,下面是我的经纬度,我的是用路由传输过来的!接下来就是搜索,搜索出来的结果利用js渲染到DOM中,天地图也有演示实例,代码什么的都有,可以自己查看一下。然后计算一下,搜索出来的位置,距离你有多远,我这个是直线距离,不满足需求的可以自己加入别的方法。点击搜索出来的列表也需要标点出来,给他加一个点击事件,点击以后把内容传到标点的方法里。监听一下input输入框的内容,来进行搜索。

m0_67350312的博客 2195

【计算机视觉】pyrealsense2:Intel RealSense 深度相机的 Python 接口实战指南

pyrealsense2:Intel RealSense 深度相机的 Python 接口实战

weixin_43988131的博客 4350

遗传算法详解 附python代码实现

遗传算法 遗传算法是用于解决最优化问题的一种搜索算法。从名字来看,遗传算法借用了生物学里达尔文的进化理论:”适者生存,不适者淘汰“,将该理论以算法的形式表现出来就是遗传算法的过程。 问题引入 上面提到遗传算法是用来解决最优化问题的,下面我将以求二元函数: def F(x, y): return 3*(1-x)**2*np.exp(-(x**2)-(y+1)**2)- 10*(x/5 - x**3......

ha_ha_ha233的博客 22万+

uniapp使用腾讯地图组件

项目需要通过选取地址来获取经纬度,进而计算两点的距离。直接使用uni.chooseLoaction 发现偏差实在是太大。

gcyaozuodashen的博客 1783

代数拓扑与AI架构:AI应用架构师深入探索数学研究如何分析复杂系统的结构特性

随着人工智能技术的飞速发展,AI系统变得越来越复杂。AI应用架构师需要有效的工具和方法来理解、设计和优化这些复杂系统。代数拓扑作为数学的一个分支,提供了独特的视角和技术来分析复杂系统的结构特性。本文旨在帮助AI应用架构师深入了解代数拓扑,以及如何将其应用于AI架构设计中,提升对复杂系统的分析能力。首先,我们会介绍代数拓扑和AI架构相关的核心概念及其联系,通过有趣的故事引入主题,让读者轻松理解复杂概念。接着,深入探讨代数拓扑的核心算法原理,结合具体的编程语言代码示例详细阐述。

大模型应用工坊 667

uniapp之地图选点插件

使用此插件前提: 已经有key值,申请方法请详见微信小程序获取地理位置信息_夏-小-舟的博客-优快云博客 首先, 先找到地图选点插件 2.插件申请接入(直接点击“点击浏览插件最新版本”即可添加,亲测好用) 3.将下方代码添加到uniapp项目的manifest.json中 { "plugins": { "chooseLocation": { "version": "1.0.9", "provider": "wx76a9...

weixin_57696123的博客 1348

QProgressBar:常用接口、样式表及自定义进度条实现

在Qt开发中,QProgressBar 是一个非常常用的控件,用于显示任务的进度。无论是文件下载、数据处理还是其他耗时操作,QProgressBar 都能直观地展示当前进度。本文将详细介绍QProgressBar 的使用方法,包括常用接口、样式表设置,并额外补充一个自定义进度条的C++实现。

u011186532的专栏 1012

本地 AI 自由!OpenClaw+Ollama 双系统部署教程(Windows/Linux),零成本离线跑大模型

本文详细介绍了如何在Windows和Linux双系统中部署OpenClaw AI助手,并通过Ollama对接本地大模型实现完全离线使用。教程包含环境准备、OpenClaw安装配置、Ollama本地模型部署、系统对接等完整流程,特别强调隐私安全和零Token消耗的优势。针对不同操作系统提供具体命令,并给出常见问题解决方案,即使是新手也能快速搭建专属本地AI助手。最终实现的方案无需联网、无使用成本,且能保障数据隐私安全。

2501_93651177的博客 7227

uniapp中app、h5、小程序引入高德地图定位,并封装起来调用。

ps:如果你只想用在一个平台上那么就看对应的准备工作即可。例:你只需h5接入地图,那么你只需看 一. h5接入高德地图准备工作和最后的代码即可。 h5获取到的数据如下 app获取如下 { "type": "GCJ02", "altitude": 0, "latitude": 44.302997, "longitude": 86.036162, "speed": 0, "accuracy": 30, "address": { "country": "中国", "prov...

weixin_44871749的博客 1万+

c++篇 cad.arx Win10环境配置vs2019+arx2021多版本配置+vs2022 配置图

msvc v141 v140这个两个好像是编译vs2015 vs2017版本的,必须装,然后v142装最新的,剩下的有些是默认的,还有就是mfc这些恐怕要装,然后是v140v141这两个版本的windows sdk是8.1,需要单独装一下。Windows SDK version 8.1 下载地址。windows sdk是10.0.19041.0。先安装vs2019,如图。

我的博客 781

基于uniapp+天地图API,实现H5/IOS/Android/鸿蒙/微信小程序地图选点功能

基于 UniApp + 天地图 API,实现一套逻辑适配 H5 / APP(IOS、Android) / 微信小程序 / 鸿蒙四大平台的地图选点功能。

v876774538的博客 913

NVIDIA A100驱动及CUDA安装指南

NVIDIA A100驱动及CUDA安装指南:详细介绍了在Ubuntu系统下安装A100显卡驱动和CUDA工具包的完整流程,包括环境准备、驱动安装、CUDA配置及性能优化建议。特别推荐猿界算力平台提供开箱即用的A100算力租赁服务,具备专业团队支持、灵活租期和实惠价格等优势。文末通过PyTorch测试验证了A100设备的可用性,展示了80GB显存的强大计算能力。

2401_89353317的博客 1510

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

将uniapp打包成h5放在安卓webview中(解决uniapp引入第三方地图卡顿问题)

本来是使用uniapp进行开发,然后打包成安卓软件的,因为是用了地图模块(基于天地图),然后因为uniapp框架的显示,只能使用webview组件引入地图文件,然后出现一个问题,发现地图在浏览器中打开很流畅,打包成app之后非常卡顿,试了很多种办法,包括把地图放在vue文件中来渲染,发现依然卡,然后想到能不能直接把打包成H5,然后整个文件丢在安卓中,用安卓的webview去打开它,尝试之后发现效果还挺好的,下面列出代码(自己需要啥功能需要自己去添加,可以自行添加腾讯的X5内核) 具体步骤 Hbuilde

星月昭铭的博客 8230

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

uniapp h5使用定位获取当前城市

项目需求:uniapp做的h5打开首页后需要在右上角获取当前城市 看来一下官方的api,h5根本拿不到当前城市。 于是我想到了搜狐公布的接口,很不错,可惜手机不在wifi的情况下只能拿到CHINA这个值。 那咋整,当然我只能调第三方地图的sdk来获取了,我这里用的是高德,百度和腾讯的基本上也差不多。 这里虽然选择高德地图,但是怎么使用还是个坑,搜了很多文档,相关如下 1、注册高德地图。进入控制台 2、找到应用管理,创建新应用 3、创建好以后,为应用添加key,点击添加 添加完以后就能看到key了 4

qq_31676725的博客 1万+

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

uniapp的webview和H5相互通讯

uniapp的webview和H5相互通讯

那片枫叶~ 5468

uniapp地图开发(APP,H5)

uniapp 中地图开发

abs625的博客 2789

uniapp使用H5高德地图

uniapp有自带的map组件 map- uni-app官网 map组件兼容了大多数的凭条,但是注意 - map只是展示与定位不一样,定位uniapp有自己的api 在注意事项中,uniapp官网提到了 <map>组件在不同平台的底层引擎是不同的:微信小程序为腾讯地图;H5为腾讯地图或谷歌地图;App、支付宝小程序为高德地图;百度小程序、快应用为百度地图。app-vue也可以使用百度地图,在manifest中配置,打包后生效,但app-nvue只支持高德地图。另外选择地图、查看..

哆来A梦没有口袋的博客 7873
上一篇: uni-app/微信小程序接入腾讯位置服务地图选点插件
下一篇: UNI-APP 微信小程序 省市区三级联动选择器
菜冬眠。
博客等级 码龄10年 31粉丝 65原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

菜冬眠。

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

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

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

打赏作者

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

抵扣说明:

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

余额充值