<template>
<div>
<!-- -->
<div id="container"></div>
<div class="traffic">
<button @click="showTraffic">展示实时交通图层</button>
<button @click="hideTraffic">隐藏实时交通图层</button>
</div>
</div>
</template>
<script>
// 引入地图插件
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置秘钥
window._AMapSecurityConfig = {
securityJsCode: "秘钥",
};
export default {
name: "GaodeMapContainer",
data() {
return {
map: null, //
traffic: null, // 实时交通
};
},
mounted() {
this.initData();
},
methods: {
// 1. 展示地图
async initData() {
const AMap = await AMapLoader.load({
key: "key", //申请好的Web端开发者key,调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar", // 缩放控件
"AMap.ControlBar", //方向控件
"AMap.MapType", // 图层切换控件
"AMap.Scale", // 比例尺控件
"AMap.HawkEye", // 鹰眼控件
"AMap.Geolocation", // 定位控件
], // 引入地图控件
});
// 3-1. 展示图层--创建图层
const layer = new AMap.createDefaultLayer({
zooms: [3, 20], //可见级别
visible: true, //是否可见
opacity: 1, //透明度
zIndex: 0, //叠加层级
});
// 2.初始化地图-把地图展示到指定的容器区域内
this.map = new AMap.Map("container", {
viewMode: "2D", //默认使用 2D 模式,平面模式
zoom: 11, //地图级别
center: [116.397428, 39.90923], //地图中心点
mapStyle: "amap://styles/normal", //设置地图的显示样式
layers: [layer], //layer为创建的默认图层3-2:展示图层
});
// 4. 创建实时交通图层
this.traffic = new AMap.TileLayer.Traffic({
autoRefresh: true, //是否自动刷新,默认为false
interval: 180, //刷新间隔,默认180s
});
this.map.add(this.traffic); //通过add方法添加图层
// 工具-缩放
const toolbar = new AMap.ToolBar(); //缩放工具条实例化
this.map.addControl(toolbar);
// 工具方向盘
const controlBar = new AMap.ControlBar();
this.map.addControl(controlBar);
// 工具-图层切换控件
const mapType = new AMap.MapType();
this.map.addControl(mapType);
// 工具-比例尺
const scale = new AMap.Scale();
this.map.addControl(scale);
// 工具-鹰眼控件
const hawkEye = new AMap.HawkEye();
this.map.addControl(hawkEye);
// 工具-定位控件
const geolocation = new AMap.Geolocation();
this.map.addControl(geolocation);
},
// 4-2 展示实时交通
showTraffic() {
this.traffic.show();
},
// 4-3 隐藏实时交通
hideTraffic() {
this.traffic.hide();
},
// 5- 添加地图控件
},
};
</script>
<style scoped>
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 800px;
background: pink;
}
.traffic {
position: fixed;
left: 10px;
top: 10px;
width: 200px;
height: 100px;
}
</style>
>
高德地图(vue2项目)-工具控件使用
于 2024-03-15 16:02:22 首次发布