Jvector地图,如何专注于标记?

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

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项目中,因此可能有更好的方法可以在以后执行此操作。

免责声明:地图边缘的点不会居中。 不过,他们应该在视野中。

编辑:根据要求,这是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); });