Javascript 如何在Amcharts地图上绘制客户机地理位置(并处理HTML5地理位置的异步提供)
我的web应用程序中有一张世界地图,由AMSharts4提供支持。我想在地图上添加一个标记,显示用户的地理位置(使用HTML5 getCurrentPosition函数)。但是在检索坐标时地图已经生成,如何在绘制后将新标记推送到地图上 我有Amcharts地图(包括地图上的标记)和地理定位功能的工作版本。 地理位置异步工作,在检索位置时脚本继续,因此同时生成地图。 我不喜欢在继续之前等待坐标被找到,因为这可能意味着几秒钟的延迟 从本质上说,我正在寻找在显示Amcharts对象后将标记数据推送到该对象的功能。 这是我的地图js:Javascript 如何在Amcharts地图上绘制客户机地理位置(并处理HTML5地理位置的异步提供),javascript,geolocation,amcharts,ammap,Javascript,Geolocation,Amcharts,Ammap,我的web应用程序中有一张世界地图,由AMSharts4提供支持。我想在地图上添加一个标记,显示用户的地理位置(使用HTML5 getCurrentPosition函数)。但是在检索坐标时地图已经生成,如何在绘制后将新标记推送到地图上 我有Amcharts地图(包括地图上的标记)和地理定位功能的工作版本。 地理位置异步工作,在检索位置时脚本继续,因此同时生成地图。 我不喜欢在继续之前等待坐标被找到,因为这可能意味着几秒钟的延迟 从本质上说,我正在寻找在显示Amcharts对象后将标记数据推送到该
// 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?
}
我可以在控制台中看到客户端位置,但我没有找到任何方法将其显示在地图上。您只需将新对象(
clientlocation
)添加到imageSeries。数据
:
imageSeries.addData(clientlocation);
也可以通过重新指定数据字段来添加数据:
imageSeries.data = [...imageSeries.data, clientlocation];
是一支代码笔作为参考。我尝试了imageSeries.data方法,但没有成功。addData调用成功。谢谢!