在Vue 2中開發百度地圖Web端應用，你可以使用百度地圖JavaScript API來實現地圖功能。以下是一個簡單的示例：

簡單的示例：

1. 首先，在你的Vue項目中安裝vue-baidu-map插件：

npm install vue-baidu-map --save

2. 在你的Vue組件中引入并使用vue-baidu-map插件：

<template><div><baidu-map :center="mapCenter" :zoom="mapZoom"><bm-marker :position="mapCenter" @click="handleMarkerClick"></bm-marker></baidu-map></div>
</template><script>
import { BaiduMap, BmMarker } from 'vue-baidu-map';export default {components: {BaiduMap,BmMarker,},data() {return {mapCenter: { lng: 116.397428, lat: 39.90923 },mapZoom: 13,};},methods: {handleMarkerClick(marker) {// 處理標記點擊事件},},
};
</script>

在上述代碼中，我們首先引入了vue-baidu-map插件，并注冊了BaiduMap和BmMarker組件。在模板中，我們使用<baidu-map>標簽創建一個地圖容器，并通過center和zoom屬性設置地圖的中心點和縮放級別。在地圖容器中，我們使用<bm-marker>標簽創建一個標記，并通過position屬性設置標記的位置。當標記被點擊時，觸發handleMarkerClick方法。

3. 在main.js中引入百度地圖JavaScript API：

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';Vue.use(BaiduMap, {ak: 'your_baidu_map_api_key',
});

在上述代碼中，需要將your_baidu_map_api_key替換為你自己的百度地圖API密鑰。

4. 最后，啟動你的Vue應用：

new Vue({el: '#app',render: h => h(App),
});

以上是一個簡單的Vue 2 + 百度地圖Web端開發的示例。你可以根據自己的需求進一步定制和擴展地圖功能。

封裝

如果你希望將地圖功能封裝成一個單獨的Vue組件，可以按照以下步驟進行操作：

1. 創建一個名為Map.vue的文件，用于封裝地圖組件：

<template><div ref="mapContainer" class="map-container"></div>
</template><script>
export default {props: {center: {type: Object,required: true,},zoom: {type: Number,default: 13,},},data() {return {map: null,};},mounted() {this.createMap();},methods: {createMap() {this.map = new BMap.Map(this.$refs.mapContainer);const point = new BMap.Point(this.center.lng, this.center.lat);this.map.centerAndZoom(point, this.zoom);},},
};
</script><style scoped>
.map-container {width: 100%;height: 400px;
}
</style>

在上述代碼中，我們創建了一個Map組件，接受center和zoom作為屬性。在mounted鉤子函數中，調用createMap方法創建地圖實例，并將地圖容器綁定到ref屬性上。在createMap方法中，我們使用百度地圖API創建地圖，并設置中心點和縮放級別。

2. 在需要使用地圖的父組件中，引入Map組件，并傳遞相應的屬性和方法：

<template><div><Map :center="mapCenter" :zoom="mapZoom"></Map></div>
</template><script>
import Map from './Map.vue';export default {components: {Map,},data() {return {mapCenter: { lng: 116.397428, lat: 39.90923 },mapZoom: 13,};},
};
</script>

在上述代碼中，我們引入了Map組件，并通過center和zoom屬性設置地圖的中心點和縮放級別。

3. 在main.js中引入百度地圖JavaScript API：

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';Vue.use(BaiduMap, {ak: 'your_baidu_map_api_key',
});

在上述代碼中，需要將your_baidu_map_api_key替換為你自己的百度地圖API密鑰。

4. 最后，啟動你的Vue應用：

new Vue({el: '#app',render: h => h(App),
});

通過以上步驟，你可以將地圖功能封裝成一個單獨的Vue組件，并在需要使用地圖的父組件中引入和使用。你可以根據自己的需求進一步定制和擴展地圖功能。

整個代碼示例

下面是一個完整的代碼示例，包括引入百度地圖API、創建地圖實例和調用地圖功能：

1. 在main.js中引入百度地圖JavaScript API：

import Vue from 'vue';
import BaiduMap from 'vue-baidu-map';Vue.use(BaiduMap, {ak: 'your_baidu_map_api_key',
});

在上述代碼中，需要將your_baidu_map_api_key替換為你自己的百度地圖API密鑰。

2. 創建一個名為Map.vue的文件，用于封裝地圖組件：

<template><div ref="mapContainer" class="map-container"></div>
</template><script>
export default {props: {center: {type: Object,required: true,},zoom: {type: Number,default: 13,},},data() {return {map: null,};},mounted() {this.createMap();},methods: {createMap() {this.map = new BMap.Map(this.$refs.mapContainer);const point = new BMap.Point(this.center.lng, this.center.lat);this.map.centerAndZoom(point, this.zoom);},addMarker() {const marker = new BMap.Marker(this.map.getCenter());this.map.addOverlay(marker);},},
};
</script><style scoped>
.map-container {width: 100%;height: 400px;
}
</style>

在上述代碼中，我們創建了一個Map組件，接受center和zoom作為屬性。在mounted鉤子函數中，調用createMap方法創建地圖實例，并將地圖容器綁定到ref屬性上。在createMap方法中，我們使用百度地圖API創建地圖，并設置中心點和縮放級別。另外，我們還添加了一個addMarker方法，用于在地圖上添加標記。

3. 在需要使用地圖的父組件中，引入Map組件，并傳遞相應的屬性和方法：

<template><div><Map :center="mapCenter" :zoom="mapZoom"></Map><button @click="addMarker">Add Marker</button></div>
</template><script>
import Map from './Map.vue';export default {components: {Map,},data() {return {mapCenter: { lng: 116.397428, lat: 39.90923 },mapZoom: 13,};},methods: {addMarker() {this.$refs.map.addMarker();},},
};
</script>

在上述代碼中，我們引入了Map組件，并通過center和zoom屬性設置地圖的中心點和縮放級別。我們還添加了一個按鈕，當點擊按鈕時，調用addMarker方法，在地圖上添加標記。

4. 最后，啟動你的Vue應用：

new Vue({el: '#app',render: h => h(App),
});

通過以上步驟，你可以將地圖功能封裝成一個單獨的Vue組件，并在需要使用地圖的父組件中引入和使用。在父組件中，你可以調用地圖組件的方法，實現自定義的地圖功能。

使用場景

使用百度地圖API可以在各種場景下實現地圖功能。以下是一些常見的使用場景：

1. 地圖展示：在網站或應用中展示地圖，標記特定的地點或區域，提供交互式地圖瀏覽體驗。

2. 定位服務：獲取用戶當前位置的經緯度信息，實現定位功能，例如顯示用戶當前位置附近的商店、餐廳等信息。

3. 路線規劃：根據起點和終點的經緯度信息，計算并展示最優路線，提供導航功能。

4. 地點搜索：根據關鍵詞搜索地點，例如搜索特定類型的商店、餐廳、景點等，展示搜索結果并在地圖上標記。

5. 地圖交互：實現地圖的縮放、平移、旋轉等交互操作，提供更好的地圖瀏覽體驗。

6. 地圖事件：監聽地圖的點擊、拖拽等事件，實現自定義的交互邏輯，例如在地圖上添加標記、繪制區域等。

7. 數據可視化：將數據在地圖上可視化展示，例如熱力圖、散點圖、區域圖等。

這些只是一些常見的使用場景，實際應用中還可以根據需求進行定制和擴展。百度地圖API提供了豐富的功能和接口，可以滿足各種地圖相關的需求。