vue和uniapp在组件中动态引入腾讯地图js包并获取用户定位

如题
接到新的需求决定使用腾讯地图的定位
注册腾讯地图的步骤这里就不说了

按照传统的方法,如果是vue项目的话
我们多数会在index.html中直接引入腾讯地图定位的js

<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>

但是由于我是在开发项目的单一组件,我无法得到index.html文件,这时候我们就可以动态引入,vue或者uniapp写h5都可以参考

	created() {
		    var script = document.createElement("script");
		    script.type = "text/javascript";
		    script.src = "https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js";
			document.getElementsByTagName('head')[0].appendChild(script);
	},

我们在created生命周期中引入,接下来我们写获取定位的js函数,并在mounted中调用

		getLocationByqqMap(){ //调用定位
			let geolocation = new qq.maps.Geolocation("你的序列号", "myapp")
			geolocation.getLocation(this.showPosition,this.showErr,{timeout: 2000})
		},
		showPosition(position) { //成功的回调
			console.log(position)
		},
		showErr(){ //显示错误
			console.log("err")
		},

在mounted中使用

	mounted() {
		this.getLocationByqqMap()
	}

好了,我们来看看结果
。。。报错了
说 ‘qq’ is no defined
这时候我习惯给这个this.getLocationByqqMap()用settimeout一下
成功了
很明显,是因为动态引入的js还没有引入完成,找不到 new qq.maps.Geolocation这个对象
那这样有什么办法呢,总不能一直用settimeout吧?
我们可以用setInterval

mounted() {
   let getlocal = setInterval(()=>{
    this.getLocationByqqMap()
    if(this.isgetlocat == true) { // 设置一个停止的标志变量
     clearInterval(getlocal);
    }
   }, 100);
}

原理就是在mounted中每隔100ms我们执行一下这个获取定位的函数,在获取到定位后,我们改变标志变量,然后清除掉这个循环的定时器

vue在某些情况下,使用setInterval这样的做法来获取未加载渲染完成的dom节点也是可以的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: Uniapp是一种基于Vue.js的跨平台开发框架,可以快速开发出同时运行在多个平台的应用程序。而腾讯地图作为国最大的地图服务提供商,已经被广泛应用于各类应用Uniapp集成了腾讯地图SDK,通过使用腾讯地图API,实现地图相关的各种功能。开发者可以在Uniapp引用相关的组件和模块,来快速实现地图应用。 在引入腾讯地图SDK之后,开发者可以轻松地进行地图的基本操作,包括地图展现、缩放、平移、标记、定位等。在腾讯地图SDK还提供了路线规划、搜索、POI等高级功能,可以满足更加复杂的地图应用需求。同时,腾讯地图SDK还针对移动端做了优化,能够提供更加流畅、快速的地图展现和操作体验。 总之,通过在Uniapp引入腾讯地图SDK,开发者可以快速简单地实现地图应用的需求,同时能够提供出色的地图展现和使用体验,为用户带来更好的服务。 ### 回答2: uniapp是一套使用Vue.js开发的跨平台开发框架,可以轻松地在多个平台上构建高性能、原生的应用程序。而腾讯地图是一款高度定制化的地图应用程序,提供了许多功能强大的地图API,帮助开发人员将地图应用程序无缝集成到他们的应用程序。 如何使用腾讯地图? 第一步:在腾讯地图官网上,注册一个开发者账号,并创建一个项目。在创建项目时,需要提供一些基本信息,例如应用程序密钥,以及需要使用的API类型。 第二步:在uniapp框架内,使用腾讯地图的SDK,将地图组件嵌入到应用程序。可以通过在Vue.js组件添加以下代码实现此目的: ```javascript <template> <view class="map-container"> <map :markers="markers" :show-location="showLocation" style="width: 100%; height: 100%;" @markertap="markertap" @regionchange="regionchange" @init="init" /> </view> </template> <script> import QQMapWX from '@/static/js/qqmap-wx-jssdk.min' import { mapState } from 'vuex' export default { data() { return { markers: [], showLocation: true, latitude: '', longitude: '' } }, onLoad() { this.initData() }, methods: { // 初始化数据 initData() { this.qqmapsdk = new QQMapWX({ key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }) }, // 点击地图标记点 markertap(e) { console.log(e) }, // 视野发生变化 regionchange(e) { console.log(e) }, // 地图初始化完成 init(e) { console.log(e) this.getLocation() }, // 获取当前位置 getLocation() { uni.getLocation({ type: 'gcj02', success: res => { console.log(res) this.latitude = res.latitude this.longitude = res.longitude this.qqmapsdk.reverseGeocoder({ location: { latitude: this.latitude, longitude: this.longitude }, success: res => { console.log(res) } }) } }) } }, computed: { ...mapState({ locationState: state => state.location }) }, onShareAppMessage() { return { title: '使用uniapp腾讯地图构建高性能应用', path: '/pages/index/index', imageUrl: '/static/images/logo.png' } } } </script> <style> .map-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> ``` 以上代码实现了在Vue.js组件嵌入地图组件,并且使用了腾讯地图提供的api,获取了当前位置的经纬度,并且在地图显示了位置。 需要注意的是,在使用腾讯地图时,需要在Vue.js组件的<template>部分使用地图组件,并且在<script>部分引入腾讯地图的SDK。而在Vue.js组件的样式部分<style>,需要设置地图组件的位置和大小。 在开发过程,还需要注意调用合适的API,根据具体的应用程序需求,选择需要的API,完成对地图添加标记点、添加轨迹、获取地理位置信息等功能。同时,需要自行根据实际需要,调整地图组件的属性值,实现更加个性化的地图显示。 总之,使用uniapp框架集成腾讯地图,可以实现跨平台的高性能地图应用程序,具有非常广泛的应用前景。 ### 回答3: Uniapp是一款强大的跨平台应用开发工具,它可以让开发者在一次开发同时适配多种平台,如:iOS、Android、H5等。而腾讯地图是一款实现地图展示和服务的工具,它可以为开发者提供完整的地图服务,包含地图数据、导航功能、位置定位等。 如果想在Uniapp使用腾讯地图,首先需要在腾讯地图开放平台注册账户,并创建应用,得到应用的key,用于接入腾讯地图的API接口。 接着,在Uniapp安装与腾讯地图相关的插件和SDK,如:tmap位置选择器插件、tmap地图SDK插件等。这些插件和SDK可以帮助开发者在Uniapp轻松使用腾讯地图的各种功能。 在实际开发,可以通过uni-tmap定位组件获取设备当前位置,并将定位结果在地图上展示。同时,可以利用tmap地图SDK的接口实现地图的放大、缩小、拖动等操作,将地图上的标记点、路线规划等信息展示在地图上。 此外,Uniapp还提供了一些高级的腾讯地图组件,如:tmap-polyline组件、tmap-circle组件等,这些组件可以为开发者提供更加细致的地图展示和定位服务。 总之,通过Uniapp腾讯地图的完美结合,开发者可以轻松实现各种地图展示和定位服务,为用户提供更好的应用体验。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值