高德地图 JSAPI 给指定部分标记颜色

此次以北京各区以不同颜色显示为例

1、新建地图对象：

  var map = new AMap.Map("container", {zoom: 11,//地图打开时缩放级别center: [116.39199256, 40.0270229],//起始显示的中心位置viewMode: '3D',//引入2D地图mapStyle: 'amap://styles/whitesmoke'//设置地图显示模式});

2、新建北京市图层：

adcode：110000。110000代表北京的高德城市编码。此表可以去高德下载adcode与省市行政区对照表。

fill：填充对应区块的颜色。此处fill会循环填充全国的地区的颜色，但只会显示adcode值对应区域的颜色。所以此处写了一个function函数，每次运行时会把每个地区的所有属性值赋给properties。所以可以在function根据properties来抓取指定区域赋给其指定色彩。

disProvince = new AMap.DistrictLayer.Province({//styles fill中的function会生成国家所有的地区颜色，通过adcode来确认需要的颜色zIndex: 1,//图层的层级adcode: 110000,//行政区编码,可以是数组depth: 2,//设置显示层级，0：国家级，1：省级，2，市级styles: {'fill': function (properties) {//填充色properties代表地图中的每个地区对象，其内有很多相关属性，会对每个地区运行一遍这个函数var adcode = properties.adcode;return getColorByAdcode(adcode);},'province-stroke': 'cornflowerblue',//省界颜色'city-stroke': 'white', //城市界颜色'county-stroke': 'rgba(255,255,255,0.5)' //区或县界颜色}});

3、将北京市的图层加载到地图上。

disProvince.setMap(map);//将disprovince图层设置到地图上

4、完整代码如图所示：

<html lang="en"><head><meta charset="utf-8"><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><style>#container {width: 100%;height: 100%;margin: 0;}</style><title>简易行政区图 - 省份&层级</title>
</head><body><div id="container"></div><scriptsrc="https://webapi.amap.com/maps?v=2.0&key=此处请填入自己的key值&plugin=AMap.Scale,AMap.ToolBar"></script><script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script><script>var map = new AMap.Map("container", {zoom: 11,center: [116.412427, 39.303573],viewMode: '2D',//引入2D地图});var disProvince;function initPro(code) {disProvince && disProvince.setMap(null);disProvince = new AMap.DistrictLayer.Province({//styles fill中的function会生成国家所有的地区颜色，通过adcode来确认需要的颜色zIndex: 12,adcode: 110000,//行政区编码,可以是数组depth: 2,//设置显示层级，0：国家级，1：省级，2，市级styles: {'fill': function (properties) {//填充色properties代表地图中的每个地区对象，其内有很多相关属性，会对每个地区运行一遍这个函数var adcode = properties.adcode;return getColorByAdcode(adcode);},'province-stroke': 'cornflowerblue',//省界颜色'city-stroke': 'white', //城市界颜色'county-stroke': 'rgba(255,255,255,0.5)' //区或县界颜色}});disProvince.setMap(map);//将disprovince图层设置到地图上}var colors = {};//获取每个区域的颜色var getColorByAdcode = function (adcode) {if (!colors[adcode]){switch (adcode){case 110101:colors[adcode] = '#cfcfcf';break;case 110102:colors[adcode] = 'rgb(' + 232 + ',' + 70 + ',34)';break;case 110105:colors[adcode] = 'rgb(' + 111 + ',' + 150 + ',34)';break;case 110106:colors[adcode] = 'rgb(' + 35 + ',' + 120 + ',65)';break;case 110107:colors[adcode] = 'rgb(' + 22 + ',' + 170 + ',120)';break;case 110108:colors[adcode] = 'rgb(' + 24 + ',' + 200 + ',150)';break;case 110109:colors[adcode] = 'rgb(' + 152 + ',' + 255 + ',170)';break;case 110111:colors[adcode] = 'rgb(' + 255 + ',' + 65 + ',109)';break;case 110112:colors[adcode] = 'rgb(' + 100 + ',' + 36 + ',120)';break;case 110113:colors[adcode] = 'rgb(' + 120 + ',' + 125 + ',200)';break;case 110114:colors[adcode] = 'rgb(' + 35 + ',' + 167 + ',220)';break;case 110115:colors[adcode] = 'rgb(' + 200 + ',' + 190 + ',230)';break;case 110116:colors[adcode] = 'rgb(' + 150 + ',' + 235 + ',250)';break;case 110117:colors[adcode] = 'rgb(' + 70 + ',' + 200 + ',22)';break;case 110118:colors[adcode] = 'rgb(' + 40 + ',' + 253 + ',34)';break;case 110119:colors[adcode] = 'rgb(' + 170 + ',' + 209 + ',130)';break;default:{var gb = Math.random() * 155 + 50;colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';}}}return colors[adcode];}
initPro(110000);//调用initpro函数设置北京市图层
</script>
</body></html>

注意：务必 src="https://webapi.amap.com/maps?v=2.0&key=此处请填入自己的key值&plugin=AMap.Scale,AMap.ToolBar"

显示效果：

高德地图 JSAPI 给指定部分标记颜色相关推荐

vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称
问题记录 vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称官方文档及示例 DragRoute相关API API中没有任何方法让我 ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
高德地图轨迹PHP,高德地图JSAPI轨迹重复绘制
介绍一个基于高德地图JSAPI轨迹展示案例: 说明: 1.定时接口取数据刷新轨迹: 2.轨迹坐标数量较大: 3.轨迹点位信息需要展示,如时间.速度.多少点位: 4.避免地图重新渲染,只刷新坐标: 使用 ...
java js 高德api_高德地图JSApi
火星坐标获取demo #iMap{height:500px;width:600px;float:left;} .info{float:left;margin:0 0 0 10px;} label{wi ...
高德地图自定义图标的点标记Marker--初体验（二）
点标记Marker 创建一个默认图标的点标记: 创建一个自定义图标的点标记: new AMap.Marker({}) 参数说明本文以Marker为主,其他点标记方法大差不差通过上两篇文章我们已经了 ...
高德地图-删除多个点标记
1.问题背景高德地图上有自己创建的marker,单击删除按钮,可以删除多个标记 2.实现源码 <!DOCTYPE html> <html><head><me ...
高德地图JSAPI的使用注意项
前言最近有个项目用到了高德地图,基于高德引擎进行相关需求的开发,开发过程中碰到了一些问题,简单的记录一下. 选择高德地图那肯定是因为买了高德地图的什么东西哈哈哈,就是可以基于高德引擎进行开发并且部 ...
JSAPI 高德地图应用---批量初始化点标记、矢量图形
在高德地图的应用中,地图上展示我们自己自定义覆盖物是很常见的应用,前提是需要覆盖物相应的定位点以及图标即可,但矢量图形不能直接展示图标,可以在信息框中展示:这里我就弄一个标记点的初始化,并且添加上信息 ...
vue 高德地图标记_vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. 第二 ...

高德地图 JSAPI 给指定部分标记颜色

高德地图 JSAPI 给指定部分标记颜色相关推荐

最新文章

热门文章