<template>
<div class="tmap">
<div class="btn">
<button @click="change2D">2D视图</button>
<button @click="change3D">3D视图</button>
<button @click="moveToLocal">平移</button>
<button @click="createInfoWindows">开启信息窗口</button>
<button @click="destroyedInfoWindows">关闭信息窗口</button>
<div>
<input id="tipinput" type="text" placeholder="请输入地名" v-model="keywords" />
<button @click="searchEvent">搜索</button>
</div>
</div>
<div class="map" id="amap-container" ref="tmap" style="width:100%;height:400px"></div>
</div>
</template>
<script>
export default {
name: "TMap",
data() {
return {
map: {
},
center: {
},
AMap: {
},
marker: null,
keywords: "",
infoWindow: {
},
placeSearch: {
},
hotspotoverEvent: {
},
auto: {
}
};
},
props: {
aMapKey: {
default: "85c467ada7b08d4b909e233d37e2d7bb",
type: String
}
},
mounted() {
this.loadScript(() => {
this.initTMap();
});
},
methods: {
// 初始化地图
// 这里参数有默认值
// 如果不传按照默认值 渲染
initTMap(
ViewMode = "3D",//3d模式
resizeEnable = true,
rotateEnable = true,
pitchEnable = true,
基于Vue的高德地图组件
最新推荐文章于 2023-12-01 09:22:10 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)