码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2020-06-30 17:14:43      阅读:150      评论:0      收藏:0      [点我收藏+]

标签: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文件,我能加载就不太清楚了 

//这个地方的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 的基本使用 (1)

标签:http   使用   strong   nbsp   service   com   javascrip   文件中   var   

原文地址:https://www.cnblogs.com/TreeCTJ/p/13214586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!