[英]Jvector map, how to focus on a marker?
Another frustrating issue I have with Jvectormap, I wish to focus on a Marker on page/map load via lngLat, how would I do this? Jvectormap 的另一个令人沮丧的问题是,我希望通过 lngLat 专注于页面/地图加载上的标记,我该怎么做? Ideally it would be good to say focus on this marker or focus on latlng.
理想情况下,最好说 focus on this marker 或 focus on latlng。 I will only be displaying 1 marker per map but I won't know the x/y just the lngLat or possibly countrycode.
我将只显示每个 map 的 1 个标记,但我不知道 x/y 只是 lngLat 或国家代码。 There might be an easier way altogether to do this so suggestions would be welcome.
可能有一种更简单的方法可以做到这一点,因此欢迎提出建议。 Thanks for your help in advanced
感谢您在高级方面的帮助
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+'');
}
});
});
I needed the same thing as you and came across your unanswered question. 我需要和你一样的东西,并且遇到了你未解决的问题。 This is the code I wrote (slash copied, pasted & modified from jVectorMap source) to solve the problem for myself.
这是我写的代码(斜杠复制,粘贴和修改jVectorMap源码)来解决我自己的问题。 I hope you and others find it helpful.
我希望你和其他人觉得它很有帮助。
Simply pass the scale, longitude, and latitude to setFocusLatLng. 只需将比例,经度和纬度传递给setFocusLatLng即可。
I may attempt to get this or something similar accepted into the jVectorMap project on GitHub, so there may be a better way to do this later. 我可能会尝试将这个或类似的内容接受到GitHub上的jVectorMap项目中,因此以后可能有更好的方法来执行此操作。
Disclaimer: Points on the edge of the map will not be centered. 免责声明:地图边缘的点不会居中。 They should be in the view, though.
不过,他们应该在视野中。
EDIT: As requested, here is the whole thing on jsfiddle: http://jsfiddle.net/BryanTheScott/rs7H5/ 编辑:根据要求,这是jsfiddle的全部内容: http : //jsfiddle.net/BryanTheScott/rs7H5/
EDIT: Also added the rest of the JS below: 编辑:还添加了以下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);
});
Very late to the party here, but I needed a way to center on a marker even after the map had initially loaded, and here is what I came up with:这里的派对已经很晚了,但即使在 map 最初加载之后,我也需要一种方法来以标记为中心,这就是我想出的:
var yourMapHere = $(yourMapObject).vectorMap('get', 'mapObject');
var point = yourMapHere.latLngToPoint(yourMarkerLat, yourMarkerLng);
var x = yourMapHere.transX - point.x / yourMapHere.scale;
var y = yourMapHere.transY - point.y / yourMapHere.scale;
yourMapHere.setScale(yourScaleValueHere, x, y, true, true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.