vue实现接口地图
Vue 中实现接口地图（基于第三方地图服务）
依赖安装
使用高德地图或百度地图等第三方服务时，需安装对应的 SDK 或插件。以高德地图为例：
npm install @amap/amap-jsapi-loader --save配置 API Key
在 public/index.html 中引入 SDK（或通过环境变量配置）：
<script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_API_KEY"></script>组件封装示例
地图容器初始化
在 Vue 组件中通过 onMounted 生命周期加载地图：
import { onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
setup() {
let map = null;
onMounted(() => {
AMapLoader.load({
key: 'YOUR_API_KEY',
version: '2.0'
}).then((AMap) => {
map = new AMap.Map('map-container', {
zoom: 12,
center: [116.397428, 39.90923] // 默认北京中心点
});
});
});
return { map };
}
};模板结构
在模板中定义地图容器：
<template>
<div id="map-container" style="width: 100%; height: 500px;"></div>
</template>接口数据与地图标记
请求接口数据
通过 Axios 获取坐标数据并渲染标记点：
import axios from 'axios';
const fetchLocations = async () => {
const response = await axios.get('https://api.example.com/locations');
return response.data;
};
// 在 onMounted 内调用
fetchLocations().then(data => {
data.forEach(item => {
new AMap.Marker({
position: [item.lng, item.lat],
map: map
});
});
});自定义信息窗口
绑定点击事件
为标记点添加信息弹窗：
new AMap.Marker({
position: [116.481488, 39.990464],
map: map
}).on('click', () => {
const infoWindow = new AMap.InfoWindow({
content: '<div>自定义信息内容</div>'
});
infoWindow.open(map, [116.481488, 39.990464]);
});注意事项
- 跨域问题：确保后端接口支持跨域或配置代理。
- 性能优化：大量标记点需使用
MarkerCluster聚合插件。 - 响应式适配：监听窗口变化时调用
map.setFitView()自适应视野。
以上代码基于高德地图实现，切换百度地图需替换对应 SDK 和 API 方法。实际项目中建议将地图逻辑封装为独立组件。
