高德地图坐标拾取

最新推荐文章于 2024-10-01 23:46:18 发布

永恒y

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量5.4k

点赞数

文章标签： html css3 前端

本文链接：https://blog.csdn.net/weixin_47996469/article/details/121286491

版权

这篇博客介绍了如何实现一个地图上的坐标拾取组件。通过点击‘坐标拾取’按钮，弹出地图组件，用户可以搜索地点或直接在地图上点击选择坐标。地图上还集成了定位功能，允许用户获取当前位置。选中坐标后，可以将其保存为规则表单的坐标值。此外，博客还包含了相关CSS样式和JavaScript代码实现。

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

html

 <div class="getCoordinate" style="margin-top: 3px" @click="coordinatePicking">坐标拾取</div>

//坐标拾取组件
 <div class="mapbox" v-show="map.showMap">
            <div class="searchDiv" style="display: flex;align-items: center">
                <label>请输入地点名称：</label>
                <el-input v-model="map.searchValue" class="searchValue"></el-input>
                <div class="myBtn searchValueBtn" style="margin-left: 16px;height: 30px" type="primary"
                    @click="searchLocation">搜索
                </div>
                <label style="margin-left: 36px">经纬度：{{ map.longitude + ',' + map.latitude }}</label>
                <div class="myBtn searchValueConfirmBtn" style="margin-left: 16px;height: 30px" type="primary"
                    @click="chooseSearchValue">拾取
                </div>
                <div class="myBtn closeBtn cancelBtn" type="primary" style="margin-left: 16px;height: 30px"
                    @click="map.showMap=false">关闭
                </div>
            </div>
            <div id="allmap"></div>
        </div>

data(){
    return{
 map: {
                obj: null,
                showMap: false,
                longitude: "",
                latitude: "",
                searchValue: ""
            },
}
}


methods:{
//点击显示坐标拾取组件
coordinatePicking() {
            this.map.showMap = true;
            if (this.ruleForm.coordinate) {
                let array = this.ruleForm.coordinate.split(",");
                this.map.longitude = array[0];
                this.map.latitude = array[1];
                this.initMap(array);
            } else {
                this.initMap();
            }
        },
//加载地图
        initMap(markers) {
            if (!markers) {
                markers = [117.233836, 31.826946]
            }
            let that = this;
            let map = new AMap.Map('allmap', {
                center: markers,
                zooms: [4, 18],//设置地图级别范围
                zoom: 13
            });

            let marker = new AMap.Marker({
                position: markers//位置
            });
            map.add(marker);
            map.on('click', function (e) {
                map.remove(marker);
                that.map.latitude = e.lnglat.getLat();
                that.map.longitude = e.lnglat.getLng();
                marker = new AMap.Marker({
                    position: [e.lnglat.getLng(), e.lnglat.getLat()], //标记当前的坐标
                    offset: new AMap.Pixel(-10, -18) //鼠标与标点的像素偏差值
                });
                map.add([marker]);
                markers.push(marker);
            });

            AMap.service(["AMap.PlaceSearch"], function () {
                //构造地点查询类
                that.map.obj = new AMap.PlaceSearch({
                    pageSize: 5, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    city: "340100", // 兴趣点城市
                    citylimit: true,  //是否强制限制在设置的城市内搜索
                    map: map, // 展现结果的地图实例
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
            });
            let options = {
                'showButton': true,//是否显示定位按钮
                'buttonPosition': 'LB',//定位按钮的位置
                /* LT LB RT RB */
                'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
                'showMarker': true,//是否显示定位点
                'markerOptions': {//自定义定位点样式，同Marker的Options
                    'offset': new AMap.Pixel(-7, -15),
                    'content':
                        '<div class="selfLocaltion">' +
                        // '<p style="color:#fff">这是定位点</p>' +
                        '<div class="point point-flicker"></div>' +
                        '</div>'
                },
                'showCircle': true,//是否显示定位精度圈
            };

            AMap.plugin(["AMap.Geolocation"], function () {
                let geolocation = new AMap.Geolocation(options);
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
            });

        },
//搜索地点
        searchLocation() {
            this.map.obj.search(this.map.searchValue)
        },
        chooseSearchValue() {
            if (!this.map.latitude) {
                this.$message("请点击地图后拾取地点");
                return false
            }
            this.ruleForm.coordinate = this.map.longitude + "," + this.map.latitude;
            this.map.showMap = false;
        },
}

css

.mapbox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999 !important;
}

.searchDiv {
    display: flex;
    align-items: center;
    height: 8%;

    p {
        margin-left: 10px;
    }
}

#allmap {
    height: 92%;
}

.searchValue {
    width: 200px;
    vertical-align: bottom;
}

.myBtn {
    margin-left: 16px;
    height: 30px;
    /*line-height: 30px;*/
    width: 60px;
    background-color: #0079fe;
    /*text-align: center;*/
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cancelBtn {
    background-color: #ececec;
    color: #6a6a6a;
}

.mapBtn {
    margin-bottom: 60px;
    color: rgb(213 34 21);
    text-decoration: underline;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 30%;
}
.getCoordinate {
    cursor: pointer;
    color: red;
}