Как нанести геолокацию клиентов на карту Amcharts (и справиться с асинхронным предоставлением геолокации HTML5) - PullRequest
Новая
       35

Как нанести геолокацию клиентов на карту Amcharts (и справиться с асинхронным предоставлением геолокации HTML5)

1 голос
/ 06 июня 2019

У меня есть карта мира в моем веб-приложении на платформе Amcharts4.Я хочу добавить маркер на карте, отображающий геолокацию пользователя (используя функцию get5urrentPosition в HTML5. Но карта уже сгенерирована во время получения координат, как добавить новый маркер на карту после ее отрисовки?

У меня есть рабочие версии как карты Amcharts, включая маркеры на карте, так и функции геолокации. Геолокация работает асинхронно, сценарий продолжается, пока извлекается местоположение, поэтому карта генерируется в это время. I 'я не большой поклонник ожидания, чтобы найти координаты, прежде чем продолжить, поскольку это может подразумевать задержку в несколько секунд.

По сути, я ищу функциональность для передачи данных маркера в мой объект Amcharts после отображения этого объектаЭто мой js для карты: 

// Themes begin
am4core.useTheme(am4themes_animated);

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

// Set map definition
chart.geodata = am4geodata_worldLow;

// Set projection
chart.projection = new am4maps.projections.Miller();

// Series for World map
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
worldSeries.exclude = ["AQ"];
worldSeries.useGeodata = true;

worldSeries.data = mapdata;

var polygonTemplate = worldSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{text}";
polygonTemplate.adapter.add("tooltipText", function(text, ev) {
  if (!ev.dataItem.dataContext.text) {
    return "{name}";
  }
  return text;
})

polygonTemplate.fill = chart.colors.getIndex(0);
polygonTemplate.nonScalingStroke = true;
polygonTemplate.propertyFields.fill = "fill";
polygonTemplate.properties.fill = am4core.color("#dddddd");

chart.zoomControl = new am4maps.ZoomControl();

// Hover state
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#333");

// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());

// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#000");
circle.stroke = am4core.color("#FFFFFF");
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = "{title}";

// Set property fields
imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";

// Add data for the three cities
imageSeries.data = [{
  "latitude": 51.561678, 
  "longitude": 5.049685,
  "title": "Rural Spark HQ"
}];

if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } 
function showPosition(position) {
    clientlocation = ({"latitude": position.coords.latitude, "longitude": position.coords.longitude, "title": "I am here!"});
    console.log(clientlocation)
    //push this clientlocation data to the map somehow?
}

Я вижу местоположение клиента в консоли, но я не нашел никакого способа получить его на карте.

1 Ответ

1 голос
/ 06 июня 2019

Вы можете просто добавить новый объект (clientlocation) в imageSeries.data: 

imageSeries.addData(clientlocation);

Или вы можете просто добавить данные, переназначив поле данных: 

imageSeries.data = [...imageSeries.data, clientlocation];

Здесь - это кодовое перо для справки.

...