vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用 （1）
2020-12-23 00:28
标签：http 使用 strong nbsp service com javascrip 文件中 var 之前是使用JavaScriptAPI 来写地图需求的，着实是没有JavaScriptAPI GL 用的舒服，并且没GL 强大。（例如多个marker，进入地图需要自适应显示多个marker）GL 直接撸就完事儿（有示例） 1、webServiceAPI 请求接口会报跨域错误 上一篇记录有提到解决方法（jsonp请求） 2、 引入js文件 https://blog.csdn.net/f1370335844/article/details/106120689 我直接在index.html文件中引入貌似没啥问题 这篇文章 讲述了另外一种引入。为啥他不加载JS文件，我能加载就不太清楚了 3、初始化地图 我的步骤是： 1、根据ip获取当前位置的 经纬度 2、渲染地图 根据你当前ip定位 为center 的地图就出来了 vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用 （1） 标签：http 使用 strong nbsp service com javascrip 文件中 var 原文地址：https://www.cnblogs.com/TreeCTJ/p/13214586.html//这个地方的key注意换成自己的key哦~
html部分
生命周期部分
// 负责渲染
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 //设置地图旋转角度
})
}
上一篇：Spring事务传播行为详解
下一篇：python批量备份交换机
文章标题：vue 腾讯地图webServiceAPI 和 javaScriptAPI GL 的基本使用 （1）
文章链接：http://soscw.com/essay/37680.html