背景在制作类似中国的人口密度“热力图”时，一开始是用高德地图实现省份和地区的显示regionsbydensityvalueColor，处理悬停和点击的交互，比如区域颜色修改，显示弹窗（InfoWindow）等。由于预计地图不会移动，所以在地图上dragEnable设置为false。发现2个问题：由于不想让地图移动，InfoWinodw的autoMove设置为false（即地图不会自动移动，窗口调整到视野），所以弹窗要自己计算，避免越界（通过判断边界设置anchor）；手机页面无法在地图区域滚动（目前未找到解决方法）。如果你有解决以上问题的方法，可以戳留言，谢谢~基于以上两个“麻烦”的问题，我转头看了一下echarts的图。本文简单记录下两种方案的大致思路。AMap高德地图参考官网示例：简单行政区域图+标注，大致思路：1.通过AMap.DistrictLayer.Country绘制中国省区constdisCountry=newAMap.DistrictLayer.Country({zIndex:10,SOC:'CHN'，深度：1，样式：{'nation-stroke'：'#ff0000'，'coastline-stroke'：'#0088ff'，'province-stroke'：'grey'，'fill'：功能（道具）{returngetColorByDGP(props.adcode_pro,GDPSpeed)}}})varmap=newAMap.Map("amap-container",{zooms:[2,10],center:[106.122082,33.719192],zoom:3.5,isHotspot:false,defaultCursor:'pointer',resizeEnable:false,dragEnable:false,zoomEnable:false,scrollWheel:false,touchZoom:false,layers:[disCountry]})2.通过AMap.LabelMarker(AMap.LabelsLayer)添加省份文字;3、分别为地图map和省文本labelMarker添加mousemove和click事件；地图浮动事件处理示例map.on('mousemove',function(ev){varpx=ev.pixel;//拾取所在行政区域varprops=disCountry.getDistrictByContainerPos(px);if(props){var广告代码=props.adc颂;如果（广告代码）{highlightDistrict（广告代码）；}}else{//悬浮在地图外的空白处updateDisCountryStyle();}});省份文字点击事件示例labelsMarker.on('mousemove',function(e){highlightDistrict(e.target._opts.extData.adcode);})高亮时更新省份区域颜色functionhighlightDistrict(adcode,color='rgb(253,244,155)'){//重置行政区样式disCountry.setStyles({'fill':function(props){returnprops.adcode==adcode?color:getColorByDGP(props.adcode_pro,GDPSpeed);}});}4.点击打开AMap.InfoWindow弹窗，设置autoMove为false，否则地图可以移动，只能通过锚点控制弹窗的方向，以及然后根据窗口的大小和位置以及容器的边框进行判断，调整实际显示位置和锚点方向先在Echarts地图上收集这两个宝物吧！1、阿里的数据可视化中心可以在这里获取国内各省市的GeoJson数据。2.echarts社区echarts官网对于国内地图的例子很少。这里可以看到更丰富的samples和configurationsourcemap配置在中国获取省份geoJson数据后，先注册：echarts.registerMap('china',china_geojson);地图相关配置：option={tooltip:{trigger:'item',triggerOn:"click",backgroundColor:'rgba(50,50,50,0.9)',borderWidth:0,extraCssText:'white-space:initial;max-height:200px;overflow:auto;pointer-events:initial;',textStyle:{color:'#fff'}},series:[{name:'中国地图',type:'map',mapType:'china',selectedMode:false,label:{show:true,fontSize:"10",color:'#333'},itemStyle:{areaColor:'#eaf0f8',borderColor:'#cccccc'},数据:[{value:10,name:'贵州',adcode:'520000'},{value:7.0,name:'广东',adcode:'440000'},{value:6.5,name:'北京',adcode:'110000'},{value:8.5,name:'重庆',adcode:'500000'},{value:5,name:'天津',adcode:'120000'},{value:2.64,name:'台湾',adcode:'710000'}]}],visualMap:{left:20,bottom:20,pieces:[{gte:0,lte:3,label:"0-3"},{gt:3,lte:5,label:"3-5"},{gt:5,lte:7，标签：“5-7”}，{gt：7，lte：9，标签：“7-9”}，{gt：9，标签：“>9”}]}}以上配置可以在社区直接运行，效果如下：直接配置echarts可以实现地图的悬浮，点击事件的交互，弹窗tooltip自动调整位置显示，还可以根据映射分组规则渲染区域颜色，与组图例、组过滤交互如果只是做地图数据显示和简单交互，用echarts会方便很多。参考资料1.ECharts+高德地图，实现省下市或市下区县地图2.Echarts绘制中国地图及省份切换
