vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用 (1)
之前是使用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 的地图就出来了