vueAmap

最新推荐文章于 2024-03-28 18:42:30 发布

今天吃了嘛o

最新推荐文章于 2024-03-28 18:42:30 发布

阅读量137

点赞数

分类专栏： vueAmap 文章标签： vue 定位

本文链接：https://blog.csdn.net/weixin_45535843/article/details/116155545

版权

vueAmap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue.js应用中集成高德地图，包括安装vue-amap插件、初始化地图配置、设置地图容器、实现搜索框功能以及处理地图点击事件来获取经纬度。此外，还展示了如何通过onSearchResult方法处理搜索结果并平均计算中心点。

摘要由CSDN通过智能技术生成

1、先下载vueAmap

npm install vue-amap --save

2、main.js中引入

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
 初始化高德地图的 key 和插件，去官网按着步骤申请key
VueAMap.initAMapApiLoader({
  key: 'dd4cc5f831b67cde767de9a65f983650',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})

3、页面

<!-- 地图容器 -->
    <div id="map_container">
    <div class="map-box">
        <div class="map-search">输入关键字:<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box></div>
        <div class="map-span"><span>经度:{{lngLng}}</span><span>纬度:{{lngLat}}</span></div>
    </div>
    <el-amap
        :center="center"
        :zoom="zoom"
        class="amap_demo"
        :plugin="plugin">
        <!-- 地图标记 -->
        <el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :key="index" :vid="index"  :events="events"></el-amap-marker>
    </el-amap>
</div>
data(){
    return{
        searchOption: {
                city: '全国',
                citylimit: false
            },
            zoom: 12,
            // 默认中心点
            center: [116.40,39.90],
            // 标记点
            markers: [],
            AMapVisible:false,
            AMapEditVisible:false,
            lngLat:"",
            lngLng:"",
            //点击标记点获取经纬度
            events:{
                click: a => {
                        console.log(a)
                    that.lngLng = a.lnglat.lng;
                    that.lngLat = a.lnglat.lat;
                    console.log(that.lngLng,that.lngLat)
                    that.markers.map(item => {
                        console.log(item.position[0],that.lngLng)
                        // console.log(item.position[1],that.lngLat)
                        // if(item.position[0] === that.lngLng && item.position[1] === that.lngLat){
                        //     console.log(item.name)
                        // }
                    })
                }
            },
            // 当前地图的插件
            plugin: [{
              enableHighAccuracy: true,//是否使用高精度定位，默认:true
              timeout: 10000,          //超过10秒后停止定位，默认：无穷大
              maximumAge: 0,           //定位结果缓存0毫秒，默认：0
              convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              showButton: true,        //显示定位按钮，默认：true
              buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
              showMarker: false,        //定位成功后在定位到的位置显示点标记，默认：true
              showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
              panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
              extensions:'all',
              pName: 'Geolocation',
            //   events: {
            //     init(o) {
            //       // o 是高德地图定位插件实例
            //       o.getCurrentPosition((status, result) => {
            //         console.log(result)
            //         that.resultPois = result.pois;
            //         if (result && result.position) {
            //             // 将当前经纬度给中心点
            //             that.center = [result.position.lng, result.position.lat];
            //             // 将当前经纬度给标记点
            //             console.log(that.markers)
            //             that.markers[0].position = that.center;
            //             that.loaded = true;
            //             that.$nextTick();
            //         }
            //       });
            //     }
            //   }
            }],
    }
}
方法：
onSearchResult(pois) {
        this.markers = [];
        //值守地点
        this.dutyTaskAdd.location = pois[0].name;
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
            pois.forEach(poi => {
            let {lng, lat} = poi;
            lngSum += lng;
            latSum += lat;
            let position = { position: [poi.lng, poi.lat]}
            this.markers.push(position);
            });
            let center = {
                lng: lngSum / pois.length,
                lat: latSum / pois.length
            };
            this.center = [center.lng, center.lat];
        }
},