Как передать пользовательский ввод и создание пользовательских функций в сценарии amchart? - PullRequest
Новая
       45

Как передать пользовательский ввод и создание пользовательских функций в сценарии amchart?

1 голос
/ 28 марта 2020

Я использую скрипт am4chart для построения карты и хочу использовать заданные пользователем точки гео-координат. Я принимаю входные данные, такие как: 

  Latitude: <input type="number" name="a" id="a" ><br>
  Longitude: <input type="number" name="b" id="b"><br>

  <button onclick="point(document.getElementById('a').value,document.getElementById('b').value)">Add</button>

Я хочу определить свою функцию в заданном сценарии amchart как: 

  function point(a,b) {
    console.log(parseFloat(a));
    console.log(parseFloat(b));
    var marker = imageSeries.mapImages.create();

    <!--  Try to put lat long    -->
    marker.latitude = parseFloat(a);
    marker.longitude = parseFloat(b);

  }

Но я получил ошибку:

Uncaught ReferenceError: точка не определена в HTMLButtonElement.onclick

Как передать данные точек для отображения маркера на карте?

Вот полный сценарий для построения карты: 

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var continents = {
  "AF": 0,
  "AN": 1,
  "AS": 2,
  "EU": 3,
  "NA": 4,
  "OC": 5,
  "SA": 6
}

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);
chart.projection = new am4maps.projections.Miller();

// Create map polygon series for world map
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
worldSeries.useGeodata = true;
worldSeries.geodata = am4geodata_worldLow;
worldSeries.exclude = ["AQ"];

var worldPolygon = worldSeries.mapPolygons.template;
<!--worldPolygon.tooltipText = "{name}";-->
worldPolygon.nonScalingStroke = true;
worldPolygon.strokeOpacity = 0.5;
worldPolygon.fill = am4core.color("#eee");
worldPolygon.propertyFields.fill = "color";

var hs = worldPolygon.states.create("hover");
hs.properties.fill = chart.colors.getIndex(9);


// Create country specific series (but hide it for now)
var countrySeries = chart.series.push(new am4maps.MapPolygonSeries());
countrySeries.useGeodata = true;
countrySeries.hide();
countrySeries.geodataSource.events.on("done", function(ev) {
  worldSeries.hide();
  countrySeries.show();
});

var countryPolygon = countrySeries.mapPolygons.template;
<!--countryPolygon.tooltipText = "{name}";-->
countryPolygon.nonScalingStroke = true;
countryPolygon.strokeOpacity = 0.5;
countryPolygon.fill = am4core.color("#eee");

var hs = countryPolygon.states.create("hover");
hs.properties.fill = chart.colors.getIndex(9);

// Set up click events
worldPolygon.events.on("hit", function(ev) {
  ev.target.series.chart.zoomToMapObject(ev.target);
  var map = ev.target.dataItem.dataContext.map;
  if (map) {
    ev.target.isHover = false;
    countrySeries.geodataSource.url = "https://www.amcharts.com/lib/4/geodata/json/" + map + ".json";
    countrySeries.geodataSource.load();
  }
});

// Set up data for countries
var data = [];
for(var id in am4geodata_data_countries2) {
  if (am4geodata_data_countries2.hasOwnProperty(id)) {
    var country = am4geodata_data_countries2[id];
    if (country.maps.length) {
      data.push({
        id: id,
        color: chart.colors.getIndex(continents[country.continent_code]),
        map: country.maps[0]
      });
    }
  }
}
worldSeries.data = data;

// Zoom control
chart.zoomControl = new am4maps.ZoomControl();


// Set initial zoom
chart.homeZoomLevel = 4;
chart.homeGeoPoint = {
  latitude: 28.644800,
  longitude: 77.216721
};
<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!    Marker !!!!!!!!!!!!!!!!!!!!!!-->
// Define marker path
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";

<!--!!!!!!!!!!!!!!!!       Retrieving coordinates of a click        !!!!!!!!!!!!-->


chart.seriesContainer.events.on("hit", function(ev) {
  console.log(chart.svgPointToGeo(ev.svgPoint));
    var coords = chart.svgPointToGeo(ev.svgPoint);
  var marker = imageSeries.mapImages.create();

<!--    Try to put lat long    -->
  marker.latitude = coords.latitude;
  marker.longitude = coords.longitude;
  console.log(document.getElementById('lat').value);

});


function point(a,b) {
  console.log(parseFloat(a));
  console.log(parseFloat(b));

  <!--  Try to put lat long    -->
  marker.latitude = parseFloat(a);
  marker.longitude = parseFloat(b);

}


<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->

// Add images
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
var imageTemplate = imageSeries.mapImages.template;
imageTemplate.tooltipText = "{title}";
imageTemplate.nonScaling = true;

var marker = imageTemplate.createChild(am4core.Sprite);
marker.path = targetSVG;
marker.horizontalCenter = "middle";
marker.verticalCenter = "middle";
marker.scale = 0.7;
<!--marker.fill = interfaceColors.getFor("alternativeBackground");-->



imageTemplate.propertyFields.latitude = "latitude";
imageTemplate.propertyFields.longitude = "longitude";

<!--imageSeries.data = [ {-->
<!--          "title": "Delhi",-->
<!--          'latitude': 28.644800,-->
<!--          'longitude': 77.216721,-->
<!--          "scale": 1-->
<!--        }, {-->
<!--          "title": "Kiev",-->
<!--          "latitude": a,-->
<!--          "longitude": b,-->
<!--        }];-->




var homeButton = new am4core.Button();
homeButton.events.on("hit", function() {
  worldSeries.show();
  countrySeries.hide();
  chart.goHome();
});

homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);



}); // end am4core.ready()

</script>
...