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

Question

我目前正在编写一个脚本，供用户 select 在地图上为旅游网络应用找到一个地方，我也是一个新手，对 javascript 没有任何应用知识，我正在 python -flask 上开发 webapp，并且由于地图在 JS 上工作，我目前卡住了。

我需要的是，在用户 select 在地图上找到一个国家之后，他们应该在那个 selected 国家内放置一个标记，我在 jvectormap 网页上查看了他在标记上的示例并且正在解决这个问题，但是那个例子允许多个标记，而我只需要放置一个标记，在国家 selected 之后，现在我可以让国家 selected 但是当你点击那个国家时，一个标记被放置，所以我宁愿需要如果该区域是 selected，则允许标记，有 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 因为您只有一个标记。

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

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

但是：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>

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

Jvectormap place only one new marker on a pre selected region

jvectormap