如何在Vue页面中通过引入js文件 constructor 初始化加载腾讯地图
时间: 2024-02-27 17:57:37 浏览: 68
首先,在Vue页面中引入腾讯地图的JS API文件,可以使用以下代码:
```javascript
<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
```
其中,`YOUR_KEY`是你申请的腾讯地图API密钥。
然后,在Vue组件的`created`钩子函数中,可以初始化地图并创建地图对象。以下是一个示例:
```javascript
<template>
<div id="map-container"></div>
</template>
<script>
export default {
created() {
// 初始化地图
const map = new qq.maps.Map(document.getElementById('map-container'), {
center: new qq.maps.LatLng(39.916527,116.397128), // 地图中心点坐标
zoom: 13 // 地图缩放级别
});
// 在地图上添加标记点
const marker = new qq.maps.Marker({
position: new qq.maps.LatLng(39.916527,116.397128),
map: map
});
}
};
</script>
```
在上面的示例中,`created`钩子函数会在组件创建完成后立即执行,此时腾讯地图API已经加载完成,可以在其中创建地图对象和标记点。需要注意的是,这里的`map-container`是一个容器元素的ID,用于容纳地图对象。
阅读全文