1. 效果图

2. 思路

使用 AMap.DistrictSearch 插件获取中国省级和市级数据
使用 AMap.DistrictLayer 和 AMap.LabelsLayer ，分别创建国家和省级的行政区图层和文字标注。
为地图绑定 complete 事件，当地图加载完成后，使用 AMap.LabelMarker 在地图上标注出省级数据。
为地图绑定 click 事件，当用户点击某一省份时，获取点击省级信息，隐藏国家图层，显示省级图层。
并在点击的省份上标注出市级数据

3. 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://webapi.amap.com/maps?v=1.4.15&key=03526e76418d9af743a39c09e6083a52&plugin=AMap.DistrictLayer,AMap.DistrictSearch"></script><title>国家和省份切换</title><style type="text/css">html,body,.map {width: 100%;height: 100%;background: white !important;margin: 0px;}</style></head><body><div id="container" class="map"></div></body><script type="text/javascript">var provinceData = [];var cityData = [];var disCountry = new AMap.DistrictLayer.Country({zIndex: 10,SOC: "CHN",depth: 1,styles: {"province-stroke": "#888888",fill: "#5470c6",},});var disProvince = new AMap.DistrictLayer.Province({zIndex: 12,adcode: "",depth: 1,styles: {"city-stroke": "#888888",fill: "#5470c6",},});var layerProvince = new AMap.LabelsLayer({collision: false, // 开启标注避让animation: true, // 开启标注淡入动画});var layerCity = new AMap.LabelsLayer({collision: false,animation: true,});var map = new AMap.Map("container", {zooms: [4, 10],center: [106.122082, 33.719192],zoom: 4,isHotspot: false, // 是否开启地图热点和标注的 hover 效果defaultCursor: "pointer",layers: [disCountry, disProvince],viewMode: "2D",resizeEnable: true,});var districtSearch = new AMap.DistrictSearch({level: "country",subdistrict: 2, //  显示下级行政区级数});districtSearch.search("中国", function (status, result) {provinceData = result.districtList[0].districtList;});map.on("complete", function () {for (var i = 0; i < provinceData.length; i++) {var province = provinceData[i];var marker = new AMap.LabelMarker({name: province.name,position: [province.center.lng, province.center.lat],zIndex: 10,text: {content: province.name,direction: "center",style: {fontSize: 10,fontWeight: "normal",fillColor: "#fff",backgroundColor: "rgb(246,137,38)",borderColor: "#fff",},},});layerProvince.add(marker);}map.add(layerProvince);});map.on("click", function (ev) {var px = ev.pixel;var props = disCountry.getDistrictByContainerPos(px); // 拾取所在位置的行政区disProvince.setDistricts(props.adcode + ""); // 显示当前点击的省份disCountry.hide();map.remove(layerProvince);map.setCenter([props.x, props.y]);map.setZoom(7);// 获取当前点击省份下的市级数据for (var i = 0; i < provinceData.length; i++) {if (props.NAME_CHN === provinceData[i].name) {cityData = provinceData[i].districtList;}}for (var i = 0; i < cityData.length; i++) {var city = cityData[i];var marker = new AMap.LabelMarker({name: city.name,position: [city.center.lng, city.center.lat],zIndex: 10,text: {content: city.name,direction: "center",style: {fontSize: 10,fontWeight: "normal",fillColor: "#fff",backgroundColor: "rgb(246,137,38)",borderColor: "#fff",},},});layerCity.add(marker);}map.add(layerCity);});</script>
</html>

参考链接：

行政区查询：https://developer.amap.com/api/jsapi-v2/guide/services/district-search
文字图层：https://developer.amap.com/api/jsapi-v2/documentation#labelslayer
海量标注：https://developer.amap.com/api/jsapi-v2/documentation#labelmarker
行政区图层：https://developer.amap.com/api/jsapi-v2/documentation#districtlayer
地图：https://developer.amap.com/api/jsapi-v2/documentation#map

高德地图-----国家和省级地图切换相关推荐

vue中基于高德地图，获取省级地图（以安徽为例）
效果图展示 <template><div><div id="mapId" class="rescure-map"></ ...
echart之全国地图切换省级地图
这是在基础地图地图的基础上结合echarts2的改进版本,echarts2中的版本只有左上角的全国地图的比较简单的实例代码. <一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实 ...
echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...
echarts从全国地图切换成省级地图地图不居中的问题
我的项目会有全国.省级两种版本.我在写全国地图的时候地图自己居中自适应.可是数据变成省级数据后,就会缩成一坨. 全国地图如下: 切换成省级数据变成如下: 我就很疑惑,我也没有设置地图的位置啥的,应该就 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...
基于Cesium使高德地图、百度地图、腾讯地图与天地图无偏移叠加
基于Cesium使高德地图.百度地图.腾讯地图与天地图无偏移叠加需求的产生方法的探索经验总结需求的产生在Cesium框架中,可以支持很多ImageryProvider,但是Viewer只用一 ...
百度、搜狗、高德、腾讯等地图完美处理偏移
工具:WOLFMAP 地图下载器做GIS行业的朋友应该清楚,在我朝的发布的地图必须经过加密后才能使用,也就是俗称的火星坐标,有的地图还在它的基础上进行二次加密.给我们使用造成一定的困扰. 该软件通过 ...
Android百度地图、高德地图、腾讯地图导航路线规划问题
Android百度地图.高德地图.腾讯地图导航路线规划在最近的项目中,需求是用户选择某个地址需要进行导航时,弹出百度地图.高德地图和腾讯地图让用户选择.如果该用户手机中已安装对应的地图App,则 ...

高德地图-----国家和省级地图切换

1. 效果图

2. 思路

3. 代码

参考链接：

高德地图-----国家和省级地图切换相关推荐

最新文章

热门文章