63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<div id="map" class="map-container"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const map = ref(null);
|
|
|
|
onMounted(() => {
|
|
// 确保maptalks库已正确安装
|
|
try {
|
|
import('maptalks').then(maptalks => {
|
|
// 确保DOM元素存在
|
|
const mapContainer = document.getElementById('map');
|
|
if (!mapContainer) {
|
|
console.error('找不到地图容器元素');
|
|
return;
|
|
}
|
|
|
|
// 初始化地图
|
|
map.value = new maptalks.Map("map", {
|
|
center: [103.75, 1.40],
|
|
zoom: 8,
|
|
baseLayer: new maptalks.TileLayer('base', {
|
|
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
|
|
subdomains: ['a', 'b', 'c', 'd'],
|
|
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
|
|
})
|
|
});
|
|
|
|
// 添加矢量图层
|
|
const layer = new maptalks.VectorLayer("vector");
|
|
map.value.addLayer(layer);
|
|
|
|
// 添加标记点
|
|
const marker = new maptalks.Marker([103.75, 1.40], {
|
|
symbol: {
|
|
markerType: 'pin',
|
|
markerFill: '#3B82F6',
|
|
markerLineColor: '#fff',
|
|
markerLineWidth: 2,
|
|
markerWidth: 30,
|
|
markerHeight: 40
|
|
}
|
|
});
|
|
layer.addGeometry(marker);
|
|
}).catch(error => {
|
|
console.error('加载maptalks库失败:', error);
|
|
});
|
|
} catch (error) {
|
|
console.error('地图初始化错误:', error);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.map-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
</style> |