Jvectormap размещает только один новый маркер в предварительно выбранном регионе - PullRequest
Новая
       43

Jvectormap размещает только один новый маркер в предварительно выбранном регионе

1 голос
/ 19 марта 2020

В настоящее время я работаю над сценарием для пользователя, чтобы выбрать место на карте для веб-приложения для путешествий, я также новичок ie и не обладаю рабочими знаниями по javascript, я разрабатываю веб-приложение на python - flask, и поскольку карта работает на 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>

1 Ответ

0 голосов
/ 24 марта 2020

Вам не нужно отслеживать markerIndex, потому что у вас есть только один маркер.

Более того, я полагаю, вам даже не нужно принудительно размещать маркер внутри уже выделенного региона, так как вы можете просто выбрать новый регион и одновременно поместить маркер внутри него - до Вы. В любом случае, если вам абсолютно необходима эта функция, вы можете просто сохранить этот ранее выбранный регион и сравнить новый выбор с этим старым кодом.

Моя демонстрационная метка может быть размещена только внутри региона, а не на море. .

Но: оригинальные карты от jVectorMap не включают некоторые крошечные страны, такие как Маврикий, Сейшельские Острова и так далее. Они просто слишком малы, вам нужно много увеличивать. Предпочтительным решением этой проблемы является размещение дополнительных маркеров на их месте.

Другим решением может быть переключение на карту мира с полным набором стран. Вот пример: jvectormap-все страны . 

$(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>
...