VUE调用高德地图之电子围栏

### 如何在 Vue 中使用高德地图 API 实现电子围栏功能 #### 初始化 Map 对象并加载地图 为了在 Vue 项目中集成高德地图，首先需要初始化 `Map` 对象。这一步骤通常通过引入高德地图 SDK 并配置相应的参数来完成。 ```javascript import AMapLoader from '@amap/amap-jsapi-loader'; export default { data() { return { map: null, }; }, mounted() { AMapLoader.load({ key: 'your_api_key', // 替换成自己的key version: "2.0", plugins: [] }).then((AMap) => { this.map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923], // 设置中心点坐标 }); }); } } ``` #### 使用 Geolocation 插件获取当前位置 一旦地图成功加载，在页面上显示用户的当前地理位置可以通过调用 `AMap.Geolocation` 来实现。此插件允许应用程序访问设备的位置服务以获得精确位置数据。 ```javascript mounted() { ... .then((AMap) => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true,// 是否使用高精度定位，默认:true timeout: 10000 // 超过10秒后停止定位，默认：无穷大 }); this.map.addControl(geolocation); geolocation.getCurrentPosition(function(status,result){ if(status=='complete'){ console.log(result.position); // 输出经纬度信息 }else{ console.error('Failed to get location'); } }); }) } ``` #### 绘制多边形表示电子围栏区域 要创建一个可视化的电子围栏，可以利用 `Polygon` 类定义一个多边形覆盖物，并将其添加到地图上作为地理边界标记。 ```javascript methods: { drawFence(points) { // points 是包含多个坐标的数组 let polygon = new AMap.Polygon({ path: points, strokeColor: "#FF33FF", strokeWeight: 6, strokeOpacity: 0.2, fillOpacity: 0.4, fillColor: '#1791fc', zIndex: 50 }); this.map.add(polygon); // 将视图调整至合适的缩放级别以便完全展示绘制好的多边形 this.map.setFitView([polygon]); } }, ... mounted(){ ... // 地图初始化完成后执行如下操作 setTimeout(() => { const fencePoints = [ [116.403322,39.920255], [116.410703,39.897555], [116.402292,39.892353], [116.389846,39.891365] ]; this.drawFence(fencePoints); }, 2000); } ``` #### 查询指定范围内的兴趣点 (POIs) 对于给定的一系列坐标点（如A1~A8），可通过 `placeSearch` 方法查找附近的 POI 数据。这些地点可能代表特定的兴趣点或地标建筑。 ```javascript methods: { searchNearbyPoi(centerPoint) { var placeSearch = new AMap.PlaceSearch({ pageSize: 5, pageIndex: 1, citylimit : false, children: 1 }); placeSearch.searchNearBy('', centerPoint, 1000, function(status, result) { if (status === 'complete') { console.log(result.poiList.pois); } }); } } // 假设已经获得了A1-A8对应的坐标列表 const poiCenters = ["国贸三期","东直门","奥体森林公园"]; poiCenters.forEach(name => { AMap.plugin(['AMap.CitySearch'], function () { var citysearch = new AMap.CitySearch(); citysearch.getLocalCity(function(status, result) { if (status === 'complete' && result.info === 'OK') { var cityName = result.city; var adcode = result.adcode; AMap.service(["AMap.Geocoder"], function() { var geocoder = new AMap.Geocoder({ city: adcode }); geocoder.getLocation(name, function(status, data) { if (status === 'complete' && data.info === 'OK') { this.searchNearbyPoi(data.geocodes[0].location); } }.bind(this)); }); } }); }); }); ```