高德地图只显示某个地区或省份，并设定显示范围

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

一、注册高德账号

地址：高德开放平台 | 高德地图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，最大显示级别为20center: [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则不显示指定地区以外部分。

高德地图只显示某个地区或省份，并设定显示范围相关推荐

vue 高德地图多边形_高德地图只显示部分地区遮罩其他地区(vue)
mounted() { this.$nextTick(()=>{ this.initmap(); this.init1("新疆"); }); }, initmap() { / ...
高德地图只显示一个省_浅谈当下各种导航软件：高德地图、百度地图、腾讯地图...
浅谈当下各种导航软件:高德地图.百度地图.腾讯地图,之前出门找不到路只能靠问路,现在我们生活中出现了各种各样的导航软件,甚至让用户出现了选择困难症,不知道选择哪一款软件比较号,在这里小编就要给大家来分 ...
中高德地图只显示某一城市_Excel实用知识：从零开始，一步步制作属于你自己的三维演示地图...
说明本文是视频内容的图文整理版. 原版视频可以在文末观看三维地图操作详解这是一份原始表格,点击表内任意一个单元格,使用Ctrl和T,将这张表转换为动态表,点击插入,三维地图. 重命名图层为销售 ...
高德地图只显示部分区域
直接上代码吧高德地图只能到最大到市级,也就是如果只显示一个县或者区的话只有想其他的办法 <div id="mountNode"></div> <sc ...
中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...
中高德地图只显示某一城市_干货 | 如何快速制作数据地图？让你的可视化逼格再高一级！...
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图. 数据地图可以最直观的表达出数据之间的 ...
高德地图只显示一个省_怎么才能在百度地图腾讯地图高德地图上把一个位置的名称改成自己店铺的名称？...
好处和优势地图广告:一目了然的超级广告,导航地图:网络地图与搜索引擎的完美组合: 地图标注:与众不同的竞争利器可以使花最少钱得到大的知名度提升及丰厚的销售回报: 客 ...
高德地图不显示定位点
高德地图不显示定位点先展示下效果图自己尝试过很多次,加了这个属性后就生效了,希望对大家有用 // 显示定位层并且可以触发定位,默认是flase aMap.setMyLocationEnabled( ...
react高德地图定位--显示城市名字
react函数组件高德地图定位–显示城市名字一.注册账号并申请Key 1.首先,注册开发者账号,成为高德开放平台开发者 2. 登陆之后,在进入「应用管理」页面「创建新应用」 3. 为应用添加 Ke ...

高德地图只显示某个地区或省份，并设定显示范围

一、注册高德账号

二、引入文件

三、完整代码

高德地图只显示某个地区或省份，并设定显示范围相关推荐

最新文章

热门文章

高德地图 只显示某个地区或省份，并设定显示范围

一、注册高德账号

二、引入文件

三、完整代码

高德地图 只显示某个地区或省份，并设定显示范围相关推荐

最新文章

热门文章

高德地图只显示某个地区或省份，并设定显示范围

高德地图只显示某个地区或省份，并设定显示范围相关推荐