vue2 开发 高德地图 ，地图只需要展示一个省份，同时鼠标点击定位直接获取 坐标，详细代码

在 Vue.js 2 中使用高德地图 (AMap) 来显示特定省份的地图并实现鼠标点击定位的功能，你需要先安装高德地图 JavaScript API 和对应的 Vue 插件。这里是一个简单的示例代码： 首先，在你的 `main.js` 或者你项目的 Vue 组件文件里引入插件： ```javascript import AMap from 'vue-amap'; Vue.use(AMap); ``` 然后在组件中配置地图，假设我们只关注省份 '北京'： ```html <template> <div id="map" ref="amap"></div> </template> <script> import { AMapLoader } from 'vue-amap'; export default { name: 'MapComponent', components: { // 添加对 AMAP 的引用 }, mounted() { // 使用 AMAPLoader 加载地图API AMapLoader.init({ key: 'your_amap_key', // 这里需要替换为你自己的高德地图 API 密钥 plugin: ['AMap.Geolocation'], }).then(() => { this.createMap(); }); }, methods: { createMap() { const map = new AMap.Map('map', { zoom: 5, // 初始缩放级别 center: [116.404, 39.9], // 北京中心点坐标，可以替换成你要显示省份的中心点坐标 zoomControl: false, // 隐藏默认缩放控件 panControl: false, // 隐藏默认平移控件 zoomEnable: false, // 禁止用户缩放 }); // 地图区域设置为北京 const provinceGeoJSON = { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Polygon', coordinates: [...], // 这部分需要根据北京省的边界数据填充，高德地图官网有提供相关的省级行政区域边界数据 }, properties: {}, } ] }; AMap.plugin('AMap.GeoJSON', function () { // 加载省级地理json数据 AMap.geoJSON(provinceGeoJSON).addTo(map); }); // 定位功能 map.on('click', event => { map.getCenter().then(center => { if (event.lnglat) { // 检查是否是定位结果 console.log('定位成功:', center); } else { console.log('点击位置:', event.lnglat); } }); }); }, }, }; </script> ``` 注意：你需要替换 `your_amap_key` 为实际的高德地图 API 密钥，并从高德地图官网获取省级行政区的边界数据用于 GeoJSON。