高德地图JS API自定义地图只显示中国地图

已于 2023-08-18 09:40:39 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： 高德地图JS 文章标签： vue.js 前端
于 2023-08-13 15:21:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shsyzhzhgn/article/details/132259670
版权

 高德地图API，只展示中国部分，效果： 

 自定义地图：mapStyle

 区域陆地、行政区名、行政区边界（外国边界）不显示

发布样式后复制样式Id

 样式引入

 

shsyzhzhgn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web端调用高德地图-自定义地图-只显示中国区域
大石化鸟的博客
02-15 3043
Web端调用高德地图-自定义地图-只显示中国区域
关于高德地图自定义地图样式只显示中国的解决方案
weixin_43860852的博客
10-26 9870
先上高德自定义地图的入口 https://geohub.amap.com/mapstyle/index 进入地图自定义编辑页面可以看到一张世界地图，现在我们的目的是只展示中国区域的地图 开始操作 1.先设置水系不显示 2.设置大洲名、世界国家名、境外首都名不显示 3.设置外国国界不显示 上面3步设置完之后就只有中国地区啦。 细节部分可自行尝试~ 如果想实现其他区域缕空，让背景融入边境以外的区域，可以看我的上一篇文章。 ...
高德地图中国地图
qq_37299525的博客
06-28 452
无
高德地图 只显示某个地区或省份，并设定显示范围
觉醒法师的专栏
04-15 1万+
高德地图 只显示某个地区或省份，并设定显示范围
js使用百度地图仅显示中国区域，实现大数据热点图
热门推荐
VcStrong的专栏
06-19 3万+
马上又到年底PPT环节了，各位实现效果之后，麻烦留言点赞。。 需求：领导需要在年会上展示我们的用户ip实时数据，做一个网页版的地图，仅仅显示中国区域。 技术分析：echart，hchart等网站都有地图版的，百度地图有热点实例，经过对比，我选用了百度地图，但是百度地图无法只显示中国区域，这个时候就需要我来动动手解决掉最后一关。 应评论的各位想要源码，页面源码包含websocket+ma...
高德地图实现绘制覆盖物，自定义右键菜单
02-26
本项目聚焦于利用高德地图js-api实现绘制覆盖物，以及自定义右键菜单的功能。 首先，我们来探讨“绘制覆盖物”这一概念。在高德地图API中，覆盖物是指可以在地图上绘制的各种图形，如点、线、面等。在这个项目中，...
高德地图 API 实现 自定义创建多个可拉伸锚点矩形。
03-19
原生 JavaScript 仿 有赞商户后台，介入高德地图，实现地图自定义区域矩形划分并绑定 ui 层，几乎每行代码都有注释，方便修改理解。 适用多个项目领域，如：外卖送货、共享单车区域划分、配送商品等。 纯前端...
JS基于高德地图定位城市闪烁特效
06-24
总的来说，"JS基于高德地图定位城市闪烁特效"融合了JavaScript编程、高德地图API的使用、HTML5 Canvas绘图、地理位置定位、自定义图层、动画实现等多个技术点，是Web开发中实现地图交互功能的一个实例。开发者在实际...
高德地图api多地点自定义显示名字+文字标识
01-09
总之，利用高德地图API，开发者可以方便地在地图上展示多地点并自定义显示名称和文字标识，通过JavaScript或原生SDK实现丰富的交互功能。通过不断学习和实践，我们可以根据具体需求打造出更加个性化的地图应用。
高德地图中国行政区划数据，精确到街道
01-20
高德地图中国行政区划基础数据，包含经纬度数据： CREATE TABLE `region` ( `id` varchar(20) NOT NULL, `name` varchar(100) DEFAULT NULL, `parent_id` varchar(20) DEFAULT NULL, `type` varchar(16) DEFAULT NULL COMMENT 'COUNTRY(国家)、PROVINCE(省)、MUNICIPALITY(自治省市)、CITY(市)、COUNTY_AREA(县、区)、VILLAGE(乡镇、街道)', `code` varchar(60) DEFAULT NULL, `sec_code` varchar(60) DEFAULT NULL, `abbreviation` varchar(60) DEFAULT NULL, `well_known_text` varchar(512) DEFAULT NULL, `is_county_level_city` tinyint(1) DEFAULT '0' COMMENT '是否为县级市', `standard_id` varchar(16) DEFAULT NULL COMMENT '国家标准id', `longitude` decimal(10,7) DEFAULT NULL COMMENT '经度', `latitude` decimal(10,7) DEFAULT NULL COMMENT '纬度', `is_enabled` tinyint(4) DEFAULT '1', `created_by` varchar(64) DEFAULT NULL, `created_stamp` datetime DEFAULT NULL, `last_updated_by` varchar(64) DEFAULT NULL, `last_updated_stamp` datetime DEFAULT NULL, PRIMARY KEY (`id`), UNIQUE KEY `idx_standard_id` (`standard_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='中国各级行政区域数据表';
高德地图常用API.zip
07-15
高德地图API的使用通常涉及到JavaScript、Android或iOS等平台的编程。开发者需要注册高德地图开发者账号，获取API密钥，然后在代码中引用相应的SDK，并按照文档指导进行调用和集成。 7. **地图交互事件**： API还...
高德地图只显示某个省份
weixin_42349568的博客
06-23 5086
实现效果： <!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>区域掩模
高德api只显示省级地图
weixin_52026870的博客
07-19 2326
使用高德api中简易行政区图-省区突出显示某个省的地图，然后将边框描粗，并将其他部分用遮罩层进行遮罩 代码如下：粘贴时记得把自己的key粘贴进去， <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
mapboxgl 地图样式 - 唯一值渲染
GIS兵器库
01-20 2074
mapboxgl 中提供了强大的地图样式编辑功能，样式表达式是其一大特色。 唯一值渲染是GIS中常见的专题图渲染方式，今天我们来看一下如何用 mapboxgl 中的样式表达式实现这一效果。 在网上找了一份北京市的行政区划图，目标是各个区设置上不同的颜色。效果如下： 方式一：使用 case 表达式 这种做法的好处是可以灵活修改每个区的颜色。 "fill-color":[ 'case', ['boolean',['==',['get','name'],'怀柔区'],false],'#FFFFC
vue3+高德地图只展示指定市、区的行政区域的地图，遮罩反向镂空其他地区
Fantasywt的博客
05-18 3225
例如像这样，只展示厦门的地图，隐藏其他地方，点击区域，在单独展示区，点击返回回到总览。
vue使用高德地图
qq_36262295的博客
04-20 809
vue-amap官网 如果定制化开发需求不太高的话，可以用vue-amap， vue-amap中好像没有这方面的配置， 而且还有一些其他的定制化开发需求， 然后就只用原生的高德。 高德地图使用准备 开发之前的准备 需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页端, 小程序端等 原生 index.html 引入 插件如果没有可以直接添加在 代码粘贴到项目中index.html文件中， 并且把
【VUE】web高德地图海量点标记,全部居中显示在屏幕中
LuviaWu的博客
07-12 3356
官方示例中setFitView()对AMap.Marker可以生效，但对海量点标记 AMap.MassMarks 似乎无效 Map类有一个方法setBounds也能实现重新调整视角： https://lbs.amap.com/api/javascript-api/reference/map // <script> 中引入高德地图 import AMap from 'AMap' var map // 页面上 <div id="my-aMap" style="width: 500px;he
高德地图api 自定义字体颜色
最新发布
09-13
根据引用中的代码，在高德地图API中自定义字体颜色可以通过设置styles中的属性来实现。在fill属性的function函数中，可以根据properties属性来抓取指定区域，并为其指定特定的字体颜色。例如，可以使用以下代码来为地区的字体设置红色： ``` 'fill': function (properties) { var adcode = properties.adcode; var color = getColorByAdcode(adcode); var fontColor = 'red'; // 自定义字体颜色 return { fillColor: color, fillOpacity: 1, strokeColor: 'cornflowerblue', strokeOpacity: 1, strokeWeight: 0.5, label: { content: properties.name, // 地区名称 offset: [0, 0], // 标签偏移量 textStyle: { fill: fontColor, // 字体颜色 fontSize: 12 // 字体大小 } } }; } ``` 通过将上述代码中的`fontColor`变量设置为你想要的字体颜色，就可以实现自定义字体颜色的效果了。请注意，上述代码只是一个示例，你可以根据自己的需求进行相应的修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值