0
표준 Visual Studio 2017을 사용하는 웹 사이트가 있습니다. 사용자 설정에 따라 HighMaps에 데이터를 표시하도록 요청하는 데 사용되는 단일 API가있는 C# 백엔드로 구성되어 있습니다 jQuery UI에서 선택합니다. 내 Windows 컴퓨터를 내 Mac만큼 사랑하지 않기 때문에 .Net Core 2.0을 사용하려고 시도 했으므로 Windows 랩톱이 필요하지 않습니다. 모든 것이 매우 잘되어 갔지만 (API 명은 Microsoft), API를 호출하는 jQuery 코드가 어떤 이유로 반환 된 데이터가지도에 푸시되지 않았습니다..NET 코어로 이동 한 후 하이 맵의 업데이트가 중지되었습니다.
다음은 실행되는 jQuery 코드입니다. alert()는 JSON 데이터를 표시하지만 맵에는 반영되지 않습니다. 필요한 경우 HTML 또는 CSS를 게시 할 수 있지만 현재는 헤드 및 스크립트 섹션을 포함 시켰습니다. 여기
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Great Locations</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/maps/highmaps.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/maps/modules/data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/mapdata/countries/us/us-all-all.js"></script>
</head>
그리고
는 jQuery를 코드입니다 :<script type="text/javascript">
var climateSteps = [
"Tropical",
"Semi-Arid",
"Desert",
"Humid",
"Mediterranean",
"Wet All Seasons",
"Wet Summer",
"Winter Snow",
"Polar"];
var climateRange = "C08";
$(function() {
$("#climate-slider .slider").slider({
range: true,
min: 0,
max: 8,
values: [0, 8],
slide: function (event, ui) {
climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
if (ui.values[0] == ui.values[1]) {
/* if user selected a single value (not a range), adjust text to fit */
$(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
}
else {
$(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
}
}
})
});
$.noConflict();
tableResult = '[{"code":"us-al-001","name":"Autauga County, AL","value":1}, {"code":"us-il-019","name":"Champaign County, IL","value":3}]';
(function ($) {
function GetCounties(userSelections) {
jQuery.support.cors = true;
$.ajax({
url: "http://localhost:5000/api/products/" + userSelections,
type: "GET",
dataType: "json",
success: function (d) {
data = JSON.stringify(d);
alert("API data received: " + data)
tableResult = data;
$("#map-container").highcharts().series[0].update({
data: JSON.parse(d)
});
},
error: function (d) {
alert("API found error: " + JSON.stringify(d));
}
});
}
jQuery(".button-submit").bind("click", {
}, function (e) {
GetCounties(climateRange);
});
data = JSON.parse(tableResult);
var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]);
var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline");
// add state acronym for tooltip
Highcharts.each(countiesMap, function (mapPoint) {
var state = mapPoint.properties["hc-key"].substring(3, 5);
mapPoint.name = mapPoint.name + ", " + state.toUpperCase();
});
var options = {
chart: {
borderWidth: 1,
marginRight: 50 // for the legend
},
exporting: {
enabled: false
},
title: {
text: "My Great Locations"
},
legend: {
layout: "vertical",
align: "right",
floating: true,
valueDecimals: 0,
valueSuffix: "",
backgroundColor: "white",
symbolRadius: 0,
symbolHeight: 0
},
mapNavigation: {
enabled: false
},
colorAxis: {
dataClasses: [{
from: 1,
to: 1,
color: "#000099",
name: "Perfect!"
}, {
from: 2,
to: 2,
color: "#009999",
name: "Very Nice!"
}, {
from: 3,
to: 3,
color: "#00994c",
name: "Good Fit"
}]
},
tooltip: {
headerFormat: "",
formatter: function() {
str = "Error";
if (this.point.value == 1) {
str = "Perfect!";
}
if (this.point.value == 2) {
str = "Very Nice!";
}
if (this.point.value == 3) {
str = "Good Fit";
}
return this.point.name + ": <b>" + str + "</b>";
}
},
plotOptions: {
mapline: {
showInLegend: false,
enableMouseTracking: false
}
},
series: [{
mapData: countiesMap,
data: data,
joinBy: ["hc-key", "code"],
borderWidth: 1,
states: {
hover: {
color: "#331900"
}
}
}, {
type: "mapline",
name: "State borders",
data: [lines[0]],
color: "black"
}]
};
// Instanciate the map
$("#map-container").highcharts("Map", options);
지도에 나타나는 모든 (지도 잘 작동하고 있음을 보여주기 위해) 나는 하드 코딩 두 군입니다. NuGet이나 SDK Dependencies에 추가해야하는 패키지가 있는지 궁금합니다. 그러나 누락 된 것이 무엇인지 모르기 때문에 많은 노력을 기울이고 있습니다. 그리고 Mac Visual Studio에서 콘솔을 표시하는 방법을 알아 내지 못 했으므로 거기에 단서가있는 경우에는 본 적이 없습니다.
코드가 오류를 발생시키는가요? 'console.log (JSON.parse (d))'의 결과는 무엇입니까? –
JSON.stringify (d)의 출력은 슬라이더 위치에 따라 다르지만 "[{"code ":"us-al-001 ","name ":"Autauga County, AL ","value ","value ": 3}, {"code ":"us-al-003 ","name ":"Baldwin County, AL " 3 "}, {"code ":"us-al-007 ","name ":"Bibb County, AL ","value ": 3}]"- "Barbour County, AL" (실제로는 훨씬 더 길다). Mac Visual Studio를 사용하여 콘솔 출력을 얻는 방법을 찾지 못했습니다 (뭔가 잘못되어 스택 추적을 표시하는 것을 제외하고는 (여기서는 그렇지 않습니다). –
콘솔 출력 패드를 표시하는 방법을 찾았지만 흥미로운 것은 응용 프로그램 출력, 오류 또는 장치 로그 패드 중 하나에 전송되지 않습니다. –