为什么highmap给地图添加颜色之后，再添加位置点，点就不能显示了呢？一开始以为是点被覆盖了，但是用了zIndex控制层级之后还是不可以。
后来自己做了一些实验，发现不添加颜色是可以显示点的。只要加上颜色就不行了，求大牛们指教。
代码如下：
@using Bridge.Model;
@model System.Collections.Generic.List<TB_Bridge>
@{
Layout = null;
//ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
@Styles.Render("~/CSS/main")
@Styles.Render("~/CSS/font-awesome")
@Scripts.Render("~/Scripts/jquery")
@Scripts.Render("~/Scripts/highmaps")
@Scripts.Render("~/Scripts/main")
@Scripts.Render("~/Scripts/lat_lon")
<script type="text/javascript">
$(document).ready(function () {
var item = new Array();
// 获取点的经纬度信息
$.ajax({
type: 'POST',
datatype: 'JSON',
async: false,
url: '@Url.Action("GetBridgeGeoJson", "MapNavi")',
success: function (data) {
var i;
for (i = 0; i < data.length; i++) {
item[i] = new Object();
item[i].name = data[i].Name;
item[i].lat = data[i].Latitude;
item[i].lon = data[i].Longitude;
}
}
});
Highcharts.setOptions({
lang: {
drillUpText: "返回"
}
});
var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']);
//var mapData = Highcharts.maps['countries/cn/custom/cn-all-china'];
$.each(data, function (i) {
this.drilldown = this.properties['drill-key'];
this.value = i;
});
//$.each(mapData.features, function (i) {
// this.drilldown = this.properties['drill-key'];
// this.value = i;
//});
$('#map-container').highcharts('Map', {
title: {
text: '中国桥梁分布'
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'left',
floating: true
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
chart: {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this;
var cname = e.point.properties["cn-name"];
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
// 二级地图
$.ajax({
type: "GET",
url: "@Url.Content("~/Scripts/highmaps/cn-china/")" + e.point.drilldown + ".geo.json",
contentType: "application/json; charset=utf-8",
dataType: 'json',
crossDomain: true,
success: function (json) {
data = Highcharts.geojson(json);
$.each(data, function (i) {
this.value = i;
});
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}, {
type: 'mappoint',
name: '桥梁位置',
color: 'red',
data: item
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
}
this.setTitle(null, { text: cname });
},
drillup: function () {
this.setTitle(null, { text: '全国地图' });
}
}
},
//the color when mouse move on
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
series: [{
name: '全国地图',
data: data,
//mapData : mapData,
dataLabels: {
enabled: true,
color: 'grey',
format: '{point.properties.cn-name}'
}
}, {
type: 'mappoint',
name: '桥梁位置',
color: 'red',
tooltip: {
enabled: true,
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>纬度: {point.lat}, 经度: {point.lon}'
},
data: item
}]
});
});
</script>
</head>
<body>
@{ Html.RenderPartial("_Header"); }
<div class="clearfix"></div>
<div class="mainbody">
<div id="map-container" style="height:600px;color: #E6E7E8;color: #005645;border:1px;">
</div>
</div>
<div class="clearfix"></div>
@{ Html.RenderPartial("_Footer"); }
</body>
</html>
