uniapp 引入腾讯地图解决H5端接口跨域

这篇具有很好参考价值的文章主要介绍了uniapp 引入腾讯地图解决H5端接口跨域。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、申请腾讯地图key

进入腾讯地图开放平台

uniapp 引入腾讯地图解决H5端接口跨域,uniapp,uni-app,微信公众平台,定位跨域

uniapp 引入腾讯地图解决H5端接口跨域,uniapp,uni-app,微信公众平台,定位跨域

二、引入腾讯地图

1. 安装 vue-jsonp

npm install --save vue-jsonp

2.在 main.js 中使用

import { VueJsonp } from 'vue-jsonp';
Vue.use(VueJsonp);

3.获取定位

// 获取当前位置
getLocation() {
	let _this = this;
	uni.getLocation({
		type: 'gcj02',
		geocode: true,
		isHighAccuracy: true,
		success: function(res) {
			console.log('==getLocation==');
			console.log(res);

			var location = res.latitude + ',' + res.longitude;
			let url = 'https://apis.map.qq.com/ws/geocoder/v1/?address=';
			_this.$jsonp(url, {
				key: mapKey,
				location: location,
				output: 'jsonp'
			}).then(res => {
				console.log('==H5获取当前位置==');
				console.log(res)
			}).catch(err => {
				console.log(err);
			});
		},
		fail: function(res) {
						console.log('获取当前位置的经纬度-失败');
						console.log(res);
		}
	});
},

 4、配置文件填写地图key

uniapp 引入腾讯地图解决H5端接口跨域,uniapp,uni-app,微信公众平台,定位跨域

5.运行结果

uniapp 引入腾讯地图解决H5端接口跨域,uniapp,uni-app,微信公众平台,定位跨域

附:下载微信小程序JavaScriptSDK。文章来源地址https://www.toymoban.com/news/detail-517059.html

到了这里,关于uniapp 引入腾讯地图解决H5端接口跨域的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题

    uniapp项目在浏览器运行,有可能调用某些接口会出现跨域问题,报错如下图所示: 存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求。同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦。一般来说,浏览

    2024年01月21日
    浏览(37)
  • 微信小程序引入腾讯地图图解

    一、准备工作 1.小程序 (qq.com)进入网址注册属于自己的小程序: 填写信息-登录邮箱激活-信息登记 2.完成后,就会进入这个页面 3.在小程序管理后台 - 开发 - 开发管理 - 开发设置 - “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com 注意此处的开发者ID-小程序ID在下

    2024年02月03日
    浏览(36)
  • uniapp小程序端使用腾讯地图

    一、获取腾讯地图密钥 1. 找到腾讯地图API 腾讯地图A地址PI 注册并登录后点击 开发文档 选择 微信小程序JavaScript SDK 进入后按照 Hello world! 中的步骤进行 2. 申请密钥 点击上面第一步中的 申请密钥 ,进入我的应用,在创建应用中输入创建的名称和类型 创建成功后点击 添加

    2024年02月16日
    浏览(34)
  • uniapp H5 实现地图选址功能

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

    2024年02月06日
    浏览(27)
  • uniapp小程序接入腾讯地图sdk

    配置uniapp配置文件设置小程序的appid 注意:匿名用户可能存在地理定位失效。 官网-api 属性: success匿名函数返回值: 注意: 在应用级生命周期位置书写定位功能 h5端配置的位置 小程序(wx) 登录开放平台——-进入控制台 申请key完成之后 赋值key密钥备用。 到公众号配置安

    2024年01月18日
    浏览(32)
  • uniapp开发小程序获取定位信息(腾讯地图)

    定位一直是一个让人头疼的问题,不是这个有问题就是那里有问题。这里结合我多方查找和实际运行,获得的一些经验给予分享。 怎么进行定位?基本流程是: 1.去腾讯位置服务的控制那里创建一个应用 腾讯位置服务 - 立足生态,连接未来 (qq.com) 2.添加一个key,并开通WebS

    2024年02月22日
    浏览(43)
  • 【uniapp小程序实战】—— 使用腾讯地图获取定位

    本篇文章分享一下我在实际开发小程序时遇到的需要获取用户当前位置的问题,在小程序开发过程中经常使用到的获取定位功能。uniapp官方也提供了相应的API供我们使用。 官网地址:uni.getLocation(OBJECT)) uni.getLocation(OBJECT) 获取当前的地理位置、速度。 OBJECT 参数说明 参数名 类

    2024年02月03日
    浏览(44)
  • uniapp实现腾讯地图定位,生成点,多点连线,清空点线,卫星地图等功能

    功能:         1.地图上标点,点有内容,点击点后可以查看点的信息,详情         2.点击地图生成点,点击多个点后可以实现点连线功能         3.点击按钮后,可以把生成的点清空         4.卫星地图和默认地图切换功能 1.latitude:纬度 2.enable-satellite:卫星地图切换

    2024年02月12日
    浏览(29)
  • uniapp微信小程序使用腾讯地图选点插件

    在A页面获取当前经纬度之后跳转至B页面打开腾讯地图选点插件 注意需要把微信开发者工具中的本地设置中的版本改为2.17.0,不然会报错 2.1使用腾讯地图 lbs.qq.com,控制台-应用管理-我的应用中,创建应用,并在相应的应用中创建Key。 注意勾选WebServiceAPI和微信小程序 web配置

    2024年02月09日
    浏览(35)
  • uniapp 配置chooseLocation微信小程序腾讯地图选点

    在uniapp中使用地图选点 搜索功能,回显功能,移动选点功能 使用到的API是 uni.chooseLocation 详细看一下都有哪些属性 latitude :目标地纬度 Number longitude :目标地经度Number keyword:搜索,仅App平台支持 String success:接口调用成功的回调函数 Function success 返回参数说明 name

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包