Vue City是一個基于Vue.js框架開發的前端地圖可視化組件庫。它提供了豐富的地圖功能和交互控件，支持多種地圖展示方式和動態數據綁定，可以幫助開發者快速構建交互性強、視覺效果好的地圖應用。

Vue City的核心代碼使用Vue.js實現，支持單文件組件開發方式，易于維護和擴展。它基于高德地圖和百度地圖兩個主流地圖API進行封裝，開發者可以根據自己的需求選擇其中一個作為底圖。

// Vue組件代碼示例
<template>
<div class="vue-city">
<vue-map :center="center" :zoom="zoom">
<vue-marker 
v-for="(position,index) in positions" 
:key="index"
:position="position"
:icon="icon"
:label="index+1"
@click="handleMarkerClick(index)"
/>
</vue-map>
</div>
</template>
<script>
import VueMap from 'vue-city/lib/map'
import VueMarker from 'vue-city/lib/marker'
export default {
name: 'VueCity',
components: {
VueMap,
VueMarker,
},
data() {
return {
center: [116.397796, 39.908789],
zoom: 12,
positions: [
[116.405285, 39.904989],
[116.419188, 39.930571],
[116.395645, 39.929986],
],
icon: {
url: './marker.png',
size: [26, 32],
anchor: [13, 32],
},
}
},
methods: {
handleMarkerClick(index) {
alert(`你點擊了第${index+1}個Marker`)
},
},
}
</script>

上述代碼演示了一個簡單的地圖應用，其中使用了VueMap和VueMarker兩個Vue組件。VueMap表示地圖容器，可以設置中心點和縮放級別等屬性；VueMarker表示地圖上的標記點，可以設置位置、圖標和標簽等屬性。通過這兩個組件的結合，我們可以方便地展示多個標記點，并響應用戶的鼠標點擊事件。

除了地圖和標記點，Vue City還提供了其他多種地圖組件，如縮放控件、比例尺控件、信息窗口組件等。這些組件可以通過簡單的配置和代碼實現，大大提升地圖應用的交互性和用戶體驗。