<template>
<div class="mapwrap">
<div id="Map"></div>
<div class="select_wrap">
<div class="tabwrop">
<el-radio-group v-model="tabIndex" size="mini">
<el-radio-button :value="item.id" :label="item.name" v-for="(item, i) in tablist" :key="i"
@click="setStyle(i)"></el-radio-button>
</el-radio-group>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {
},
data() {
return {
map: null,
tabIndex: "全部",
tablist: [
{
name: "全部",
id: 1,
},
{
name: "正常",
id: 2,
},
{
name: "异常",
id: 3,
},
],
center: '',
marker: '',
};
},
methods: {
intMap() {
this.center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
let map = new TMap.Map("Map", {
center: this.center
});
this.marker = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
})
},
geometries: [{
"id": 'demo',
"styleId": 'marker',
"position": new TMap.LatLng(39.984104, 116.307503),
"properties": {
"title": "marker"
}
}]
});
},
setStyle() {
//更换marker样式方法
this.marker.setStyles({
"marker": new TMap.MarkerStyle({
"width": 70,
"height": 70,
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png',
"opacity": 0.5
})
})
},
},
mounted() {
this.intMap()
},
};
</script>
<style lang="less" scoped>
.mapwrap {
// padding: 10px 0 10px 10px;
box-sizing: border-box;
height: calc(100%);
position: relative;
#Map {
height: 100%;
width: 100%;
position: absolute;
}
}
.select_wrap {
width: 200px;
height: 40px;
position: absolute;
top: 20px;
left: 20px;
z-index: 1999;
display: flex;
.tabwrop {
width: 200px;
margin-left: 10px;
color: #fff;
}
}
</style>
高德地图的使用
于 2023-12-07 15:52:13 首次发布