腾讯地图在vue上面使用
上面是腾讯地图的传送门
准备步骤
首先去注册一个账户,获取一个KEY,这个KEY 是腾讯那边提供的,等等再下面代码会用到
使用步骤
在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 // 地地图缩放
});