vue2 引入腾讯地图
时间: 2023-11-10 07:04:25 浏览: 189
vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换demo
要在 Vue2 中引入腾讯地图,可以按照以下步骤进行:
1. 在 index.html 中引入腾讯地图的 JavaScript API:
```html
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
```
其中,YOUR_KEY 需要替换成你自己的腾讯地图 API 密钥。
2. 在组件中使用腾讯地图:
```vue
<template>
<div ref="map" style="width: 100%; height: 400px;"></div>
</template>
<script>
export default {
mounted() {
const map = new qq.maps.Map(this.$refs.map, {
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 13
});
}
};
</script>
```
在 mounted 钩子函数中,创建一个新的 qq.maps.Map 实例,并将其挂载到组件的 DOM 元素上。
阅读全文