Jvector地图，如何聚焦于一个标记？

Question

Jvector地图，如何聚焦于一个标记？

3

我对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+'');            
                   }
            });
});

- D J

在这篇帖子中，您将找到您需要的答案。 - GeoGraphGIS

那并没有回答我的问题。 - D J

2个回答

1

虽然我来晚了，但我需要一种方法来在地图初始加载后仍然将标记居中，以下是我想出的方法:

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);

- Blake Freeman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bpscott · Accepted Answer

我需要和你一样的东西，并发现了你未回答的问题。这是我编写的代码（从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);
});