Jvectormap 在预选区域上仅放置一个新标记

Question

我目前正在编写一个脚本，供用户在地图上为旅行 webapp 选择一个地方，我也是新手，对 javascript 没有工作知识，我正在 python -flask 上开发 webapp，并且由于地图适用于 JS 我目前卡住了。

我需要的是，在用户在地图上选择一个国家后，他们应该在该选定的国家/地区放置一个标记，我查看了 jvectormap 网页上标记的示例并正在解决这个问题，但该示例允许几个标记，而我只需要放置一个标记，在选择国家后，现在我可以选择国家，但是当您单击该国家时，会放置一个标记，所以我宁愿需要允许标记区域已被选中，有 onRegionSelected 属性，但我无法弄清楚如何为该功能使用 isSelected 属性，因此非常感谢您的帮助。

此外，完成此操作后，我需要将此标记的坐标传递到数据库中的表单，所以如果可能的话，你能帮我解决这个问题吗？我正在使用 wtforms 但我不知道如何从 javascript 访问变量，我需要标记中的值通过表单将它们存储在数据库中，

提前谢谢你！

代码：

    <div id="world-map" style="width: 800px; height: 600px"></div>

    <script>
      $(function(){
            var map,
                markerIndex = 0,
                markersCoords = {};

            map = new jvm.Map({
                map: 'world_mill',
                markerStyle: {
                  initial: {
                    fill: 'red'
                  }
                },
                hoverColor: '#FCEF06',
                hover: {
                    stroke: 'black',
                    "stroke-width": 2,
                    fill:'#FCEF06'
                },

                regionsSelectable: true,
                regionsSelectableOne: true, 
                regionStyle: {
                    fill:'black',
                    selected: {
                        fill: 'red'
                    }
                }, 
                container: $('#world-map'),

                onMarkerTipShow: function(e, label, code){
                  map.tip.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
                },
                onMarkerClick: function(e, code){
                  map.removeMarkers([code]);
                  map.tip.hide();
                }


            });

            map.container.click(function(e){
                var latLng = map.pointToLatLng(
                        e.pageX - map.container.offset().left,
                        e.pageY - map.container.offset().top
                    ),
                    targetCls = $(e.target).attr('class');

                if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
                  markersCoords[markerIndex] = latLng;
                  map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
                  markerIndex += 1;
                }
            });
          });
    </script> 

Answer 1

您不需要跟踪markerIndex，因为您只有一个标记。

此外，我相信您甚至不需要强制将标记放置在已选择的区域内，因为您可以简单地选择一个新区域并将标记同时放置在其中 - 由您决定。 无论如何，如果您绝对需要此功能，您可以简单地存储之前选择的区域并根据旧代码检查新选择。

在我的演示中，标记只能放置在区域内，不能放置在海上。

但是：jVectorMap 的原始地图不包括毛里求斯、塞舌尔等一些小国家。它们太小了，您需要放大很多。 此问题的首选解决方案是在其位置放置额外的标记。

另一种解决方案可能是切换到完整国家的世界地图。这是一个示例：jvectormap-all-countries。

$(document).ready(function() {

  var selectedRegion = "";
  
  var map = new jvm.Map({
    map: "world_mill_en",
    container: $('#map'),
    zoomOnScroll: true,
    regionsSelectable: true,
    regionsSelectableOne: true, 
    backgroundColor: "aliceblue",
    regionStyle: {fill:'black', selected: {fill: 'red'}},
    markerStyle: {initial: {fill: 'yellow'}},
    hoverColor: '#FCEF06',
    hover: {stroke: 'black', "stroke-width": 2, fill:'#FCEF06'},
    markers: [],
    series: {markers: [{attribute: 'fill', scale: {}, values: []}]},
    onMarkerClick: function(e, code) {
       map.tip.hide();
    },
    onMarkerTipShow: function(e, label, code) {
      var coords = map.markers[code].config.latLng;
      map.tip.text(coords[0].toFixed(2) + ', ' + coords[1].toFixed(2));
    }
  });

  map.container.on("click", function(e){
    var name = "MARKER",
        latLng = map.pointToLatLng(
          e.pageX - map.container.offset().left,
          e.pageY - map.container.offset().top
        ),
        targetCls = $(e.target).attr('class');
    if(latLng) {
      var currentRegion = map.getSelectedRegions()[0];
      var isRegion = targetCls && ~targetCls.indexOf("jvectormap-region");
      var isMarker = targetCls && ~targetCls.indexOf("jvectormap-marker");
      if (isRegion) {
        var isSameRegion = selectedRegion === currentRegion;
        selectedRegion = currentRegion;
        map.removeAllMarkers();
        map.addMarker(name, {latLng: [latLng.lat, latLng.lng]});
      }
    }
  });

});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>

<body>
  <div id="map" style="width: 800px; height: 600px"></div>
</body>

</html>