gpt4 book ai didi

javascript - Jvector map,如何聚焦在一个标记上?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:16:47 25 4
gpt4 key购买 nike

Jvectormap 的另一个令人沮丧的问题是,我希望通过 lngLat 专注于页面/ map 加载上的标记,我该怎么做?理想情况下,最好说 focus on this marker 或 focus on latlng。我只会在每张 map 上显示 1 个标记,但我不会只知道 lngLat 或国家/地区代码的 x/y。可能有一种更简单的方法可以做到这一点,因此欢迎提出建议。感谢您在高级方面的帮助

  var markers = [ {latLng: [47.774099, -52.793427], name: "loc 1", label: "This blahblah"}]
$(function(){
$('#map1').vectorMap({
map: 'world_mill_en',
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: markers,
focusOn:{
latLng: [47.774099, -52.793427],
scale: 5
},
onMarkerLabelShow: function(event, label, index) {
label.html( ''+markers[index].label+'');
}
});
});

最佳答案

我需要和你一样的东西,并且遇到了你没有回答的问题。这是我为自己解决问题而编写的代码(斜线从 jVectorMap 源代码复制、粘贴和修改)。希望对您和其他人有所帮助。

只需将比例、经度和纬度传递给 setFocusLatLng。

我可能会尝试让这个或类似的东西被接受到 GitHub 上的 jVectorMap 项目中,所以以后可能会有更好的方法来做到这一点。

免责声明: map 边缘的点不会居中。不过,它们应该在 View 中。

编辑:根据要求,这是 jsfiddle 上的全部内容: http://jsfiddle.net/BryanTheScott/rs7H5/

编辑:还添加了以下 JS 的其余部分:

$(function(){
var smallMap = $('#my_map_container').vectorMap({
map: 'world_mill_en',
zoomOnScroll: true,
zoomMax:5,
zoomMin:5,
regionStyle: {
initial: {
fill: '#222222',
"fill-opacity": 1,
stroke: '#444444',
"stroke-width": 1,
"stroke-opacity": 0.7
},
hover: {
"fill-opacity": 0.8,
fill: '#333333'
}
},
markerStyle: {
initial: {
fill: "#000000",
"stroke": "#7FC556",
"stroke-width": 2,
r: 3
}
},
markers: [[37.770172,-122.422771]]
});

var mapObj = $('#my_map_container').vectorMap('get', 'mapObject');

mapObj.setFocusLatLng = function(scale, lat, lng){
var point,
proj = jvm.WorldMap.maps[this.params.map].projection,
centralMeridian = proj.centralMeridian,
width = this.width - this.baseTransX * 2 * this.baseScale,
height = this.height - this.baseTransY * 2 * this.baseScale,
inset,
bbox,
scaleFactor = this.scale / this.baseScale,
centerX,
centerY;

if (lng < (-180 + centralMeridian)) {
lng += 360;
}

point = jvm.Proj[proj.type](lat, lng, centralMeridian);

inset = this.getInsetForPoint(point.x, point.y);
if (inset) {
bbox = inset.bbox;

centerX = (point.x - bbox[0].x) / (bbox[1].x - bbox[0].x);
centerY = (point.y - bbox[0].y) / (bbox[1].y - bbox[0].y);

this.setFocus(scale, centerX, centerY);
}
}

mapObj.setFocusLatLng(5, 37.770172,-122.422771);
});

关于javascript - Jvector map,如何聚焦在一个标记上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14728371/

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