高德地圖 下拉搜索南網五省 根據電價區分區域顏色
阿新 • • 發佈：2018-07-20
提示 攔截 自治區 container 一個 list cte tla pub
<!-- 重點： on, setAreaNodesForLocating -->
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/events.html -->
<base href="//webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>事件處理</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
#search{
position: relative;
z-index: 20;
margin-bottom:-20px;
}
#tip {
background-color: #fff;
padding:0 10px;
border: 1px solid silver;
box-shadow: 3px 4px 3px 0px silver;
position: absolute;
font-size: 12px;
right: 10px;
top: 5px;
border-radius: 3px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="tip">
省：<select id=‘province‘ style="width:100px" onchange=‘search(this)‘></select>
市：<select id=‘city‘ style="width:100px" onchange=‘search(this)‘></select>
區：<select id=‘district‘ style="width:100px" onchange=‘search(this)‘></select>
街道：<select id=‘street‘ style="width:100px" onchange= ‘setCenter(this)‘></select>
</div>
<script type="text/javascript" src=‘https://webapi.amap.com/maps?v=1.4.8&key=3eea2775baa95074bbac31d5e5490726&plugin=AMap.DistrictSearch‘></script>
<!-- UI組件庫 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="E:\MyPublic\gaodeMAP\js\jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var mapDatas = [
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41445866,
"REGIONNAME": "廣州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41354713,
"REGIONNAME": "韶關市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.42041984,
"REGIONNAME": "深圳市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41093388,
"REGIONNAME": "珠海市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41342017,
"REGIONNAME": "汕頭市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41336784,
"REGIONNAME": "佛山市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40996575,
"REGIONNAME": "江門市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40668768,
"REGIONNAME": "湛江市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40763706,
"REGIONNAME": "茂名市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41367927,
"REGIONNAME": "肇慶市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41789693,
"REGIONNAME": "惠州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41459185,
"REGIONNAME": "梅州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41576698,
"REGIONNAME": "汕尾市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41482884,
"REGIONNAME": "河源市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41064483,
"REGIONNAME": "陽江市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41546825,
"REGIONNAME": "清遠市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41828379,
"REGIONNAME": "東莞市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41126406,
"REGIONNAME": "中山市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41232637,
"REGIONNAME": "潮州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41406927,
"REGIONNAME": "揭陽市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.41337121,
"REGIONNAME": "雲浮市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40213293,
"REGIONNAME": "貴陽市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.38831747,
"REGIONNAME": "六盤水市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40366817,
"REGIONNAME": "遵義市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.39971408,
"REGIONNAME": "安順市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.4089855,
"REGIONNAME": "銅仁市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40215451,
"REGIONNAME": "黔西南布依族苗族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.39332938,
"REGIONNAME": "畢節市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40215451,
"REGIONNAME": "黔東南苗族侗族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40215451,
"REGIONNAME": "黔南布依族苗族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "南寧市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "柳州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "桂林市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "梧州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "北海市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "防城港市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "欽州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "貴港市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "玉林市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "百色市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "賀州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "河池市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "來賓市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40401939,
"REGIONNAME": "崇左市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40505433,
"REGIONNAME": "海口市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40792346,
"REGIONNAME": "三亞市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "三沙市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "五指山市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40904352,
"REGIONNAME": "瓊海市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40199688,
"REGIONNAME": "儋州市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "文昌市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "萬寧市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "東方市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "定安縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "屯昌縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "澄邁縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "臨高縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "白沙黎族自治縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "昌江黎族自治縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "樂東黎族自治縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "陵水黎族自治縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "保亭黎族苗族自治縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0.40262911,
"REGIONNAME": "瓊中黎族苗族自治縣"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "昆明市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "曲靖市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "玉溪市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "保山市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "昭通市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "麗江市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "普洱市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "臨滄市"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "楚雄彜族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "紅河哈尼族彜族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "文山壯族苗族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "西雙版納傣族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "大理白族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "德宏傣族景頗族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "怒江傈僳族自治州"
},
{
"INTERVALSTARTTIME": "2018-06-22 17:45:00",
"PRICE": 0,
"REGIONNAME": "迪慶藏族自治州"
}
]
//創建地圖
var map = new AMap.Map(‘container‘, {
resizeEnable: true,
center: [107.30946, 23.937629],
zoom: 7
});
// 根據電價值來選擇顏色，根據行政編號來確定地圖顏色區域
//just some colors
var colors = [
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
"#b82e2e",
"#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
"#651067", "#329262", "#5574a6", "#3b3eac"
];
AMapUI.loadUI([‘geo/DistrictExplorer‘], function(DistrictExplorer) {
//創建一個實例
var districtExplorer = new DistrictExplorer({
eventSupport: true,
map: map
});
//創建一個輔助Marker，提示鼠標內容
var tipMarker = new AMap.Marker({
//啟用冒泡，否則click事件會被marker自己攔截
bubble: true
});
//監聽feature的hover事件
districtExplorer.on(‘featureMouseout featureMouseover‘, function(e, feature) {
var isHover = e.type === ‘featureMouseover‘;
if (!isHover) {
tipMarker.setMap(null);
return;
}
var contentText = feature.properties.name;
mapDatas.map(item=>{
if(feature.properties.name == item.REGIONNAME){
contentText = `<div>${feature.properties.name}</div><div>電價：${item.PRICE}</div>`;
}
})
tipMarker.setMap(map);
tipMarker.setPosition(e.originalEvent.lnglat);
tipMarker.setLabel({
offset: new AMap.Pixel(20, 20),
content: contentText //氣泡裏的內容
});
});
//監聽鼠標在feature上滑動
districtExplorer.on(‘featureMousemove‘, function(e, feature) {
//更新提示位置
tipMarker.setPosition(e.originalEvent.lnglat);
});
//feature被點擊
districtExplorer.on(‘featureClick‘, function(e, feature) {
console.log(‘點擊: ‘ + feature.properties.name);
});
//外部區域被點擊
districtExplorer.on(‘outsideClick‘, function(e) {
console.log(‘區域外點擊‘);
});
var colorsFun = (value) => {
if (value>=0&&value<=0.099){
return colors[0]
}else if(value>=0.1&&value<=0.199){
return colors[1]
}else if(value>=0.2&&value<=0.299){
return colors[2]
}else if(value>=0.3&&value<0.4){
return colors[3]
}else if(value>=0.4&&value<=0.499){
return colors[4]
}else if(value>=0.5&&value<=0.599){
return colors[5]
}else if(value>=0.6&&value<=0.699){
return colors[6]
}else if(value>=0.7&&value<=0.799){
return colors[7]
}else if(value>=0.8&&value<=0.9){
return colors[8]
}else if(value>0.9){
return colors[9]
}else{
return ‘#fff‘
}
}
function renderAreaNode(areaNode) {
// if ([310000, 330100, 330200].indexOf(areaNode.getAdcode()) >= 0) {
// 440000, //廣東
// 450000, //廣西
// 460000, //海南
// 520000, //貴州
// 530000, //雲南
if ([440000, 450000, 460000,520000,530000].indexOf(areaNode.getAdcode()) >= 0) {
//繪制子區域
districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
// console.log("feature",feature);
// console.log(‘i‘,i)
var fillColor = ‘#fff‘,strokeColor = ‘#fff‘
mapDatas.map(item=>{
if(feature.properties.name == item.REGIONNAME){
fillColor = strokeColor = colorsFun(item.PRICE);
}
})
// var strokeColor = colors[colors.length - 1 - i % colors.length];
return {
cursor: ‘default‘,
bubble: true,
strokeColor: strokeColor, //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 1, //線寬
fillColor: fillColor, //填充色
fillOpacity: 0.35, //填充透明度
};
});
}
//繪制父區域
districtExplorer.renderParentFeature(areaNode, {
cursor: ‘default‘,
bubble: true,
strokeColor: ‘black‘, //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 1, //線寬
fillColor: ‘gray‘, //填充色
fillOpacity: 0.2, //填充透明度
});
}
var adcodes = [
440000, //廣東
450000, //廣西
460000, //海南
520000, //貴州
530000, //雲南
// 310000, //上海
// 330100, //杭州
// 330200, //寧波
// 330000 //浙江
];
districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {
//設置定位節點，支持鼠標位置識別
//註意節點的順序，前面的高優先級
districtExplorer.setAreaNodesForLocating(areaNodes);
//清除已有的繪制內容
districtExplorer.clearFeaturePolygons();
for (var i = 0, len = areaNodes.length; i < len; i++) {
renderAreaNode(areaNodes[i]);
}
//更新地圖視野
// map.setFitView();
// map.setFitView(districtExplorer.getAllFeaturePolygons());
});
});
// 根據下拉框 來獲取 選中的地區 並將它突出顯示
var map, district, polygons = [], citycode;
var citySelect = document.getElementById(‘city‘);
var districtSelect = document.getElementById(‘district‘);
var areaSelect = document.getElementById(‘street‘);
// map = new AMap.Map(‘mapContainer‘, {
// resizeEnable: true,
// center: [116.30946, 39.937629],
// zoom: 3
// });
//行政區劃查詢
var opts = {
subdistrict: 1, //返回下一級行政區
showbiz:false //最後一級返回街道信息
};
district = new AMap.DistrictSearch(opts);//註意：需要使用插件同步下發功能才能這樣直接使用
district.search(‘中國‘, function(status, result) {
if(status==‘complete‘){
getData(result.districtList[0]);
}
});
function getData(data,level) {
var bounds = data.boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
strokeColor: ‘#CC66CC‘,
fillColor: ‘#CCF3FF‘,
fillOpacity: 0.5,
path: bounds[i]
});
polygons.push(polygon);
}
map.setFitView(polygons);//地圖自適應
// map.setFitView(districtExplorer.getAllFeaturePolygons());
}
//清空下一級別的下拉列表
if (level === ‘province‘) {
citySelect.innerHTML = ‘‘;
districtSelect.innerHTML = ‘‘;
areaSelect.innerHTML = ‘‘;
} else if (level === ‘city‘) {
districtSelect.innerHTML = ‘‘;
areaSelect.innerHTML = ‘‘;
} else if (level === ‘district‘) {
areaSelect.innerHTML = ‘‘;
}
var subList = data.districtList;
var subList2 = [];
if(!level){
subList.map(item => {
if(item.name == ‘廣東省‘ || item.name == ‘廣西壯族自治區‘ || item.name == ‘雲南省‘ || item.name == ‘貴州省‘ || item.name == ‘海南省‘){
subList2.push(item)
}
})
subList = subList2;
}
if (subList) {
var contentSub = new Option(‘--請選擇--‘);
var curlevel = subList[0].level;
var curList = document.querySelector(‘#‘ + curlevel);
curList.add(contentSub);
for (var i = 0, l = subList.length; i < l; i++) {
var name = subList[i].name;
var levelSub = subList[i].level;
var cityCode = subList[i].citycode;
contentSub = new Option(name);
contentSub.setAttribute("value", levelSub);
contentSub.center = subList[i].center;
contentSub.adcode = subList[i].adcode;
curList.add(contentSub);
}
}
}
function search(obj) {
//清除地圖上所有覆蓋物
for (var i = 0, l = polygons.length; i < l; i++) {
polygons[i].setMap(null);
}
var option = obj[obj.options.selectedIndex];
var keyword = option.text; //關鍵字
var adcode = option.adcode;
district.setLevel(option.value); //行政區級別
district.setExtensions(‘all‘);
//行政區查詢
//按照adcode進行查詢可以保證數據返回的唯一性
district.search(adcode, function(status, result) {
if(status === ‘complete‘){
getData(result.districtList[0],obj.id);
}
});
}
function setCenter(obj){
map.setCenter(obj[obj.options.selectedIndex].center)
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>
高德地圖 下拉搜索南網五省 根據電價區分區域顏色