vue实现map
Vue 中实现 Map 功能
在 Vue 中实现地图功能通常需要结合第三方地图库（如高德地图、百度地图或 Google Maps）。以下是几种常见方法：
使用高德地图
安装高德地图 SDK：
npm install @amap/amap-jsapi-loader --save在 Vue 组件中引入并使用：
<template>
<div id="map-container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
data() {
return {
map: null
}
},
mounted() {
AMapLoader.load({
key: '你的高德地图Key',
version: '2.0',
plugins: ['AMap.Scale', 'AMap.ToolBar']
}).then((AMap) => {
this.map = new AMap.Map('map-container', {
viewMode: '2D',
zoom: 11,
center: [116.397428, 39.90923]
})
})
}
}
</script>
<style>
#map-container {
width: 100%;
height: 400px;
}
</style>使用百度地图
安装百度地图 SDK：
npm install vue-baidu-map --save全局注册或在组件中使用：
<template>
<baidu-map
:center="center"
:zoom="zoom"
style="width: 100%; height: 400px"
></baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map'
export default {
components: {
BaiduMap
},
data() {
return {
center: { lng: 116.404, lat: 39.915 },
zoom: 15
}
}
}
</script>使用 Google Maps
安装 Google Maps SDK：
npm install @googlemaps/js-api-loader在组件中使用：
<template>
<div ref="mapRef" style="width: 100%; height: 400px"></div>
</template>
<script>
import { Loader } from '@googlemaps/js-api-loader'
export default {
data() {
return {
map: null
}
},
mounted() {
const loader = new Loader({
apiKey: '你的Google Maps Key',
version: 'weekly'
})
loader.load().then(() => {
this.map = new google.maps.Map(this.$refs.mapRef, {
center: { lat: 39.90923, lng: 116.397428 },
zoom: 8
})
})
}
}
</script>常见功能实现
添加标记
// 高德地图示例
const marker = new AMap.Marker({
position: [116.397428, 39.90923],
map: this.map
})添加信息窗口
// 百度地图示例
const infoWindow = new BMap.InfoWindow('内容')
this.map.openInfoWindow(infoWindow, this.center)绘制路径
// Google Maps示例
const path = new google.maps.Polyline({
path: [
{ lat: 39.9, lng: 116.4 },
{ lat: 39.91, lng: 116.41 }
],
map: this.map
})注意事项
- 所有地图服务都需要申请开发者Key
- 国内项目推荐使用高德或百度地图
- 国际项目推荐使用Google Maps
- 注意地图API的调用限制和配额
- 移动端需要额外处理手势和交互
