高德地图 map遮挡其他区域只显示某个城市，加区域边界

最新推荐文章于 2024-08-28 02:20:30 发布

袋鼠@糊糊

最新推荐文章于 2024-08-28 02:20:30 发布

阅读量5.6k

点赞数 2

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_40685103/article/details/107037833

版权

本文介绍了如何利用JavaScript和Vue.js结合高德地图API，实现地图仅显示特定城市并突出城市区域边界的技巧。通过设置地图的中心点和视野范围，可以有效地遮挡其他区域，达到聚焦某一城市的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示
在这里插入图片描述

<template>
    <div class="hot_wrapper">
        <div class="map">
            <div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div>
        </div>
    </div>
</template>

<script>
import AMap from "AMap";
export default {
   
    props:['typeMap','activedIndex'],
    data() {
   
        return {
   
            adCode: 330600, // 绍兴
            city: '绍兴市',

        }   
    },
    methods: