Vue使用腾讯地图

最新推荐文章于 2024-05-27 12:00:44 发布

贪睡的小聪

最新推荐文章于 2024-05-27 12:00:44 发布

阅读量5.2k

点赞数 6

分类专栏：前端知识 vue

本文链接：https://blog.csdn.net/weixin_43285211/article/details/88108234

版权

vue 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

前端知识

14 篇文章 0 订阅

订阅专栏

腾讯地图在vue上面使用

url:https://lbs.qq.com/javascript_v2/

上面是腾讯地图的传送门

准备步骤

首先去注册一个账户,获取一个KEY,这个KEY 是腾讯那边提供的,等等再下面代码会用到

使用步骤

1551671429810

在vue项目的public 下,找到index.html 文件

在head头部加入代码

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=你刚刚注册的KEY"></script>

下面这个是我的head

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>请稍后...</title>
  <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=你刚刚注册的KEY"></script>
</head>

完成上面步骤,你已经在你的项目引用了腾讯地图了,那么下面就要在页面使用地图

页面上

 <div class="map" ref="map"></div>

在created()上面添加

var center = new qq.maps.LatLng(经度, 纬度);
// this.map  在data 里面声明一个变量
this.map = new qq.maps.Map(this.$refs.map, {
        center: center, // 地图的中心地理坐标。
        zoom: 32 // 地地图缩放
});

贪睡的小聪

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue使用腾讯地图

腾讯地图在vue上面使用url:https://lbs.qq.com/javascript_v2/上面是腾讯地图的传送门准备步骤首先去注册一个账户,获取一个KEY,这个KEY 是腾讯那边提供的,等等再下面代码会用到使用步骤在vue项目的public 下,找到index.html 文件在head头部加入代码&lt;script charset="utf-8" src="http...
复制链接

扫一扫