vue2实现高德地图区域掩模并展示弹框

 1、先展示一下成果啦

 2、安装依赖包

npm i @amap/amap-jsapi-loader --save

 3、去高德开发平台创建应用

4、完整代码

<template>
    <div class="demo">
        <div id="container"></div>
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    securityJsCode: "你的安全密钥"
};
export default {
    name: "demo",
    data() {
        return {
            map: null,
            centerPoint: [112.135255, 32.021947], // 襄阳市中心点
            // centerPoint: [104.195397, 35.86166], // 中国
            district: null,
            polylines: [],
            animationFrameId: '',
            marker: null,
            lnglat: [],
            addressInfo: '',
            locationName: '',
            polygon: null,
            polygonList: [],

            polygons: [],
            polylines: []
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: "你的key",
                version: "2.0",
                plugins: [
                    "AMap.DistrictSearch",
                    "AMap.TileLayer",
                    "AMap.Marker",
                    "AMap.Polyline",
                    "AMap.Polygon",
                    "AMap.Geocoder",
                    "AMap.Icon",
                    "AMap.Size",
                    "AMap.Pixel",
                ],
            }).then(AMap => {
                let opts = { subdistrict: 0,extensions: "all",level: "city" };
                this.district = new AMap.DistrictSearch(opts);
                this.district.search("襄阳市", (status, result) => {
                    let { boundaries } = result.districtList[0]
                    let mask = [];
                    for (let i = 0; i < boundaries.length; i++) {
                        mask.push([boundaries[i]]);
                    }
                    // 初始化地图
                    this.map = new AMap.Map("container", {
                        mask: mask,
                        center: this.centerPoint,
                        viewMode: "2D",
                        showLabel: true,
                        labelzIndex: 130,
                        zoom: 9,
                        zoonEnable: true,
                        resizeEnble: true,
                        layers: [
                            // 常规图层
                            new AMap.TileLayer(),
                        ]
                    });
                    // 设置边界线
                    boundaries.forEach(path => this.createBoundary(this.map, path));
                    // 添加点击事件
                    this.addMarkerClick()
                });

            }).catch(e => {
                console.log(e);
            });
        },
        createBoundary(map, path) {
            // 边界线
            let polyline = new AMap.Polyline({
                path,
                strokeColor: "#99ffff",
                strokeWeight: 4,
                lineJoin: "round",
                map
            });
            // 边界线范围 为打点做准备
            let polygon = new AMap.Polygon({
                path,
                fillColor: "#fff",
                fillOpacity: 0,
                strokeWeight: 2,
                strokeColor: "#99ffff",
                map,
                bubble: true,
                clickable: false,
            });

            this.polygons.push(polygon);
            this.polylines.push(polyline);
        },

        addMarkerClick() {
            this.map.on('click', async (e) => {
                if (this.marker) {
                    // 移除上一次的打点
                    this.map.remove(this.marker);
                    this.lnglat = [];
                }
                // 判断打的点是否在有效范围内
                let isInPolygon = this.polygons.some(polygon => polygon.contains(e.lnglat));
                if (!isInPolygon) {
                    return this.$message.error('您点击的位置不在有效区域内，请重新选择。');
                }
                this.lnglat = [e.lnglat.lng, e.lnglat.lat];
                this.marker = new AMap.Marker({
                    position: this.lnglat,
                    offset: new AMap.Pixel(0, 0),
                    map: this.map
                });
                let geocoder = new AMap.Geocoder({city: '襄阳'})
                // 转化经纬度坐标为地址描述
                geocoder.getAddress(this.lnglat, (status, result) => {
                    if (status === 'complete' && result.info === 'OK') {
                        this.addressInfo = result.regeocode.formattedAddress
                        if(this.addressInfo) {
                            this.marker.setLabel({
                                direction:'right',
                                offset: new AMap.Pixel(10, 0),
                                content: `<div class='info'>${this.addressInfo}</div>`,
                            });
                        }
                        this.map.add(this.marker)
                    }
                })    
            });
        }
    },
  
};
</script>

<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100vh;
    background: #080e1e !important;
}
::v-deep .amap-marker-label {
    background: #fff;
    border: 1px solid pink;
    font-size: 16px;
    padding: 20px;
    box-sizing: border-box;
}
</style>

原文地址：https://blog.csdn.net/qq_43962582/article/details/144284073

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！