gpt4 book ai didi

javascript - AMCharts,使用外部按钮缩放到某些国家/地区

转载 作者:行者123 更新时间:2023-12-01 04:04:51 27 4
gpt4 key购买 nike

好的,所以我在 AMCharts 中有这张 map ,其中包含某些国家/地区的 ID、LAT 和经度的外部按钮,当我将鼠标悬停在它们上方时,我希望 map 能够缩放并以该国家/地区为中心,这是代码示例...

http://codepen.io/sheko_elanteko/pen/rjYvgE

var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "EG",
"color": "#67b7dc",
"rollOverOutlineColor": "#000",
"autoZoom": true,
"balloonText": "Egypt"
}, {
"id": "KZ",
"color": "#67b7dc",
"rollOverOutlineColor": "#000",
"autoZoom": true,
"balloonText": "Kazakistan"
}, {
"id": "US",
"color": "#67b7dc",
"rollOverOutlineColor": "#000",
"autoZoom": true,
"balloonText": "United States"
}]
},
"areasSettings": {
"color": "#999",
"autoZoom": false,
// "selectedColor": "#CC0000",
"balloonText": "",
"outlineColor": "#fff",
"rollOverOutlineColor": "#fff"
},
"listeners": [{
"event": "rendered",
"method": function(e) {
// Let's log initial zoom settings (for home button)
var map = e.chart;
map.initialZoomLevel = map.zoomLevel();
map.initialZoomLatitude = map.zoomLatitude();
map.initialZoomLongitude = map.zoomLongitude();
}
}]
});

function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}

$("button.country").mouseenter(function(event) {
event.stopPropagation();
var countryID = $(this).data("id");
var country = map.getObjectById(countryID);
var lat = $(this).data("lat");
var long = $(this).data("long");
country.color = '#000';
// map.zoomToSelectedObject(country);
map.zoomToLongLat(3, lat, long);
country.validate();

}).mouseleave(function(event){
event.stopPropagation();
var countryID = $(this).data("id");
var country = map.getObjectById(countryID);
country.color = '#CC0000';
country.validate();
centerMap();
});

如您所见,我对每个国家/地区的坐标以及缩放级别进行了硬编码,但缩放无法正常工作,尤其是对于美国!

我还想知道是否有办法获取每个国家/地区的 LAT 和经度,这样我就不会对其进行硬编码。

AMCharts 中有一个名为“zoomToSelectedObject”的函数,但我尝试了该函数并给了它对象,但没有成功。

最佳答案

您可以尝试 amCharts 的 selectObject 方法。它的默认功能是缩放到提供的 map 对象(您已经通过使用 getObjectById 获得的 map 对象。示例:

$("button.country").mouseenter(function(event) {

event.stopPropagation();
var countryID = $(this).data("id");
var country = map.getObjectById(countryID);
map.selectObject(country);

}).mouseleave( ... );

只需确保将 "selectable": true 添加到您的 areasSettings 中即可。没有它, selectObject 方法将无法工作。

amCharts map 拥有优秀的文档,您可以在这里找到:https://docs.amcharts.com/3/javascriptmaps/AmMap#selectObject .

关于javascript - AMCharts,使用外部按钮缩放到某些国家/地区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41911770/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com