一个页面下，引入多个tmap组件，配置参数不同，怎么不渲染多张地图，而是只渲染显示最后一张地图呢？

[zhangkaivictor]

一个页面下，引入多个tmap组件，配置参数不同，怎么只渲染显示最后一张地图呢

微信生态

对接微信生态相关能力

出发 停止移动 暂停 重新开始

    <div style="width: 45%; height: 500px">
      <tmap-map
        ref="map"
        id="shop"
        mapKey="RZLBZ-2XACV-OXXPC-UYPPM-FPUAO-UMBHT"
        :center="shopMapCenter"
        :zoom="17"
        :doubleClickZoom="true"
        :rotation="45"
        :pitch="30"
      >
        <tmap-multi-marker :styles="shopMarkerStyles" ref="shopMarkers" :geometries="shopGeometries" />
      </tmap-map>
    </div>
  </div>
</el-card>

<script name="application-market"> import { defineComponent, ref } from 'vue';

export default defineComponent({
name: 'PlayBack',

setup() {
const markers = ref();
const paths = [
{ lat: 39.98481500648338, lng: 116.30571126937866 },
{ lat: 39.982266575222155, lng: 116.30596876144409 },
{ lat: 39.982348784165886, lng: 116.3111400604248 },
{ lat: 39.978813710266024, lng: 116.3111400604248 },
{ lat: 39.978813710266024, lng: 116.31699800491333 }
];
const geometries = [
{
id: 'pl_1', // 折线唯一标识，删除时使用
styleId: 'styleBlue', // 绑定样式名
paths
}
];
return {
markers,
center: { lat: 39.984104, lng: 116.307503 },
id: 'polyline-layer',
styles: {
styleBlue: {
color: '#3777FF', // 线填充色
width: 4, // 折线宽度
borderWidth: 2, // 边线宽度
borderColor: '#FFF', // 边线颜色
lineCap: 'round' // 线端头方式
}
},
paths,
geometries,
markerStyles: {
'car-down': {
width: 40,
height: 40,
anchor: {
x: 20,
y: 20
},
faceTo: 'map',
rotate: 180,
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png'
},
start: {
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
},
end: {
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
}
},
markerGeometries: [
{
id: 'car',
styleId: 'car-down',
position: { lat: 39.98481500648338, lng: 116.30571126937866 }
},
{
id: 'start',
styleId: 'start',
position: { lat: 39.98481500648338, lng: 116.30571126937866 }
},
{
id: 'end',
styleId: 'end',
position: { lat: 39.978813710266024, lng: 116.31699800491333 }
}
],
moveAlong: () => {
markers.value.moveAlong(
{
car: {
path: paths.map(p => new window.TMap.LatLng(p.lat, p.lng)),
speed: 250
}
},
{
autoRotation: true
}
);
},
stopMove: () => {
markers.value.stopMove();
},
pauseMove: () => {
markers.value.pauseMove();
},
resumeMove: () => {
markers.value.resumeMove();
},
print() {
console.log('click');
},

  shopMapCenter: { lng: 116.397428, lat: 39.90923 },
  shopMarkerStyles: {
    //点标注的相关样式
    centerMarker: {
      width: 25,
      height: 35,
      src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
    }
  },
  shopGeometries: [{ position: { lng: 116.397428, lat: 39.90923 } }]

};

}
});
</script>

<style lang="scss" scoped> .ctrl { position: absolute; top: 0; left: 0; z-index: 1001; display: flex; align-items: center; } </style>