高德地图 只显示某个地区或省份,并设定显示范围_高德地图只显示某个地区-程序员宅基地

技术标签: 地图  前端  javascript  

这里给大家演示只显示北京区域的地图,其他地区不显示。

一、注册高德账号

地址:高德开放平台 | 高德地图API

注册好账号后,登录点击进入“我的应用”,创建应用,获取key。

二、引入文件

        注意引入 高德组件库时,将账号中“我的应用”获取的key,替换掉代码中的“高德应用key”,否则有些数据会获取不到。

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示北京市</title>
<style>
*, #container{ margin:0; padding: 0; width: 100%;height: 100%}
</style>
</head>
<body>
<div id="container"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=高德应用key&plugin=AMap.DistrictSearch"></script> 
</body>
</html>

这里使用多个插件,可以plugin后成以逗号形式追加,如下:

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=高德应用key&plugin=AMap.MarkerClusterer,AMap.DistrictSearch"></script> 

三、完整代码

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示北京市</title>
<style>
*, #container{ margin:0; padding: 0; width: 100%;height: 100%}
</style>
</head>
<body>
<div id="container"></div>

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=高德应用key&plugin=AMap.DistrictSearch"></script> 
<script language="javascript">
    var options = {
        subdistrict: 0,
        extensions: 'all',
        level: 'province'
    };
    var district = new AMap.DistrictSearch(options);
    //查询北京市区域
    district.search('北京市', function(status, result) {
        var bounds = result.districtList[0]['boundaries'];
        var mask = [];
        for(var i =0;i<bounds.length;i++){
            mask.push([bounds[i]]);
        }
        //实例化地图
        var map = new AMap.Map('container', {
            mask: mask,
            zoom: 10,                //设置当前显示级别
            expandZoomRange:true,    //开启显示范围设置
            zooms: [7, 20],          //最小显示级别为7,最大显示级别为20
            center: [116.43, 39.92],
            viewMode: '3D',          //这里特别注意,设置为3D则其它地区不显示
            zoomEnable: true,        //是否可以缩放地图
            resizeEnable: true,
            mapStyle: "amap://styles/light"
        });
        //添加描边
        for(var i =0;i<bounds.length;i++){
            new AMap.Polyline({
                path:bounds[i],
                strokeColor:'#3078AC',
                strokeWeight:2,
                map:map
            })
        }
    });
    </script>
</body>
</html>

如上代码,expandZoomRange和zooms使用,可固定地图在指定地区显示范围。

是否显示指定区域以外内容,可通过viewMode进行控制,设置为3D则不显示指定地区以外部分。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jiciqiang/article/details/124201632

智能推荐

Python从入门到入坟(6)-程序员宅基地

文章浏览阅读170次。2020/06/01 面向对象编程面向对象(object oriented programming,OOP)编程的思想主要是针对大型软件设计而来的。面向对象编程使程序的扩展性更强、可读性更好,使得编程可以像搭积木一样简单。Python中一切皆对象。Python支持面向过程、面向对象、函数式编程等多种编程范式。面向对象和面向过程的区别面向过程思维:更加关注的是“程序的逻辑流程”,是一种“执行者”思维,适合编写小规模的程序。面向对象思维:更加关注的是“软件中对象之间的关系”,是一种“设计者”思维_python从入门到入坟

用Python 绘制多个同心圆 (Python经典编程案例)_python利用负循环画10个同心圆-程序员宅基地

文章浏览阅读4.1w次,点赞12次,收藏14次。案例:绘制多个同心圆代码如下:import turtlet = turtle.Pen()my_colors = ("red", "green", "yellow", "black")t.width(4)t.speed(1)for i in range(10): # 0 1 2 3 4 t.penup() t.goto(0, -i*10) # 0, -100,-2..._python利用负循环画10个同心圆

pki的java实现书籍_精通PKI网络安全认证技术与编程实现 PDF扫描版[214MB]-程序员宅基地

文章浏览阅读240次。精通PKI网络安全认证技术与编程实现从实战出发,介绍了PKI应用开发过程和细节。《精通PKI网络安全认证技术与编程实现》共32章,分6篇,主要内容包括PKI基础知识、OpenSSL开发、CrytoAPI开发、JavaSecurity开发、电子商务网站应用、PKI技术应用等,涉及C语言、Java语言、JSP、ASP/ASP.NET、PHP等开发语言。为了方便读者深入了解PKI,《精通PKI网络安全认..._api安全技术与实战pdf

c语言字符串函数 小数,C语言modf()函数:求双精度数的小数部分-程序员宅基地

文章浏览阅读644次。函数名: modf头文件:函数原型: double modf(double value, double *iptr);功 能: 求双精度数的小数部分参 数: double value 为要操作的双精度数 ,double *iptr 为要传回整数部分的变量指针返回值: 返回value的小数部分程序例: 分别求出双精度number的小数部分和整数部分,并将结果输出#include#includ..._c语言求一个双精度数的整数部分和小数部分

SYN flood_http存在synflood吗-程序员宅基地

文章浏览阅读288次。最近在学习DDos相关知识,参考一些只是,做了摘要,供自己参考。 参考:http://blog.csdn.net/xlf13872135090/article/details/8059538SYN Flood 攻击原理 利用TCP协议缺陷,发送了大量伪造的TCP连接请求,使得被攻击方资源耗尽,无法及时回应或处理正常的服务请求。一个正常的TCP连接需要三次握手,首先客户端发送一个包含SYN标志的数_http存在synflood吗

测牛学堂:软件测试之数据库操作语句sql的外键查询_sql查询外键id的数据-程序员宅基地

文章浏览阅读775次。我们之前学习的都是针对一个表的操作。如果要进行多个表之间的操作,就要用到外键把他们关联起来。外键的作用:能够让多个表进行关联,使表与表之间有联系,实现共性抽取。如果数据项比较多的情况下,把所有数据都存放在一个表中,如果表太大,影响操作效率。解决办法就是把一个表拆分成多个表,并且用外键去关联。例子:如果要设计一个员工表1)员工表:编号、姓名、年龄、性别、所在分公司、所在部门2)部门表:编号、部门名称、部门经理、主要任务3)公司表:编号、分公司名,地址、电话、法人把公司和部门的数据抽取出来,形成_sql查询外键id的数据

随便推点

学习布局(15) 段落类的样式_段落元素设置样式-程序员宅基地

文章浏览阅读220次。line-height: 设置元素当中的每行文本的行高(行间距) .test { width: 300px; height: 40px; margin-bottom: 20px; padding: 10px; background-color:..._段落元素设置样式

opencv: 使用InRange函数进行阈值操作 Thresholding Operations using inRange_inrange和cv2.threshold一起使用-程序员宅基地

文章浏览阅读1.3k次。目标:使用OpenCV cv::inRange 函数进行基本的 阈值操作, 基于像素值在HSV色度空间的范围进行对象检测理论:前一篇文章中我们学习了如何使用cv::threshold 阈值函数进行阈值操作 本文我们将学习使用 cv::inRange 来进行处理 原理是一样的但是现在我们增加了一个我们所需要的 【像素值的范围】HSV色度空间 HSV colorspaceHSV ..._inrange和cv2.threshold一起使用

瑜伽教学法 | 为什么你说的口令会员没反应?_会员病了无法来上瑜伽课怎么说-程序员宅基地

文章浏览阅读154次。  瑜伽培训课程层出不穷,但市面上都没有教授瑜伽老师们如何“教”的系统培训。瑜伽行业表面看似繁荣,但大多数老师缺失教学的“灵魂”。  为此,心合瑜伽学院王梓涵院长结合多年来积累的经验以及瑜伽老师的痛点,与心合教学团队不断打磨,开创瑜伽培训先河,首创贴合瑜伽老师的『瑜伽教学法』,教学法正是指导瑜伽老师们如何上课的法门!  不少老师们,有时会有这样的问题:  “我把正确的口令讲出来了,但是会员好像不听我的口令,并没有按照口令去做,需要我不停地辅助和做示范才能完成...”  一个优秀的老师,总可以_会员病了无法来上瑜伽课怎么说

随机森林sklearn FandomForest,及其调参_随机森林及其调参-程序员宅基地

文章浏览阅读2.2w次,点赞12次,收藏113次。随机森林概述随机森林是集成学习方法bagging类中的翘楚。与集成学习boosting类的GBDT分庭抗礼。bagging类集成学习采用的方法是:用部分数据 or 部分特征 or 多个算法 训练一些模型;然后再组合这些模型,对于分类问题采用投票多数表决,回归问题采用求平均。各个模型训练之间互不影响,天生就适合并行化处理。在如今大数据时代背景下很有诱惑力。 主要效果:重点关注降低方差,..._随机森林及其调参

解决Exception: org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z-程序员宅基地

文章浏览阅读1.5k次,点赞2次,收藏2次。解决Exception: org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z和Error: JAVA_HOME is incorrectly set.Please update D:\Software\hadoop260\conf\hadoop-env.cmd‘-Xmx512m’ 不是内部或外部命令,也不是可运行的程序或批处理文件。这个错误目前我知道的有以下几种解决办法:一、查看hadoop安装是_org.apache.hadoop.io.nativeio.nativeio$windows.access0(ljava/lang/string;i)z

linux 找不到防火墙设置的,linux怎么样查看防火墙有没开启-程序员宅基地

文章浏览阅读2.6k次。我的是linux系统,那么要怎么样才能查看防火墙有没有开启呢?下面由学习啦小编给你做出详细的linux查看防火墙是否开启方法介绍!希望对你有帮助!linux查看防火墙是否开启方法一:service iptables status可以查看到iptables服务的当前状态。但是即使服务运行了,防火墙也不一定起作用,你还得看防火墙规则的设置 iptables -L在此说一下关于启动和关闭防火墙的命令:1..._linux防火墙服务找不到

推荐文章

热门文章

相关标签