vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用

Posted 敲代码的树先生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用 相关的知识,希望对你有一定的参考价值。

之前是使用javascriptAPI 来写地图需求的,着实是没有JavaScriptAPI GL 用的舒服,并且没GL 强大。(例如多个marker,进入地图需要自适应显示多个marker)GL 直接撸就完事儿(有示例)

 

1、webServiceAPI 请求接口会报跨域错误   上一篇记录有提到解决方法(jsonp请求)

2、 引入js文件    https://blog.csdn.net/f1370335844/article/details/106120689 我直接在index.html文件中引入貌似没啥问题  这篇文章 讲述了另外一种引入。为啥他不加载JS文件,我能加载就不太清楚了 

//这个地方的key注意换成自己的key哦~
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

3、初始化地图

  我的步骤是:

        1、根据ip获取当前位置的 经纬度

                             2、渲染地图

 html部分
<div id="container"></div> 生命周期部分 // 负责渲染 mounted() { this.getMyLocation() } method 部分 getMyLocation() { //这里是根据webserviceApi 根据ip 请求当前的经纬度 const KEY = ‘这里填写你的key‘ let url = ‘https://apis.map.qq.com/ws/location/v1/ip‘ this.$jsonp(url, { key: KEY, output: ‘jsonp‘ }).then(json => { // latitude longitude 自己定义,用来存放 当前的经纬度 this.latitude = json.result.location.lat; this.longitude = json.result.location.lng;
   this.initMap() console.log(json)
//可以打印一下是啥样 }).catch(error => { console.log(error) }) } initMap() { var center = new TMap.LatLng(this.latitude, this.longitude) let container = document.getElementById(‘container‘) var map = new TMap.Map(container, { center: center, //设置地图中心坐标 zoom: 17, //设置地图缩放级别 pitch: 43.5, //设置俯仰角 rotation: 45 //设置地图旋转角度 }) }

根据你当前ip定位  为center 的地图就出来了

 

以上是关于vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用 的主要内容,如果未能解决你的问题,请参考以下文章

uni-app使用腾讯地图(三)

腾讯位置服务使用方法详解(三)

腾讯地图API详解

腾讯地图api使用——地图选点自动定位到当前位置

uniapp小程序实战—— 使用腾讯地图获取定位

uniapp小程序实战—— 使用腾讯地图获取定位