带有位置选择器的多张传单地图

问题描述 投票：0回答：1

您能给我一个解决方案，以便能够使用传单地图显示两个位置选择器吗？第一张地图的代码如下。我尝试了各种方法来复制它，但总是以某些功能无法正常工作而告终。

<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js">
</script>
<style>
#map {
  * + * {
    margin:0;
  }
}
</style>
<p2></p2>
<script>
var map;
var pin;
var tilesURL='https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
var mapAttrib='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>';

// add map container
$('p2').prepend('<div id="map" style="height:300px;width:100%;"></div>');
MapCreate();

function MapCreate() {
  // create map instance
  if (!(typeof map == "object")) {
    map = L.map('map', {
      center: [-6.175,106.827],
      zoom: 8
    });
  }
  else {
    map.setZoom(8).panTo([-6.175,106.827]);
  }
  // create the tile layer with correct attribution
  L.tileLayer(tilesURL, {
    attribution: mapAttrib,
    maxZoom: 19
  }).addTo(map);
}

map.on('click', function(ev) {
  $('#acff-post-field_66575345d723e').val(ev.latlng.lat+', '+ev.latlng.lng);
  $('#lng').val(ev.latlng.lng);
  if (typeof pin == "object") {
    pin.setLatLng(ev.latlng);
  }
  else {
    pin = L.marker(ev.latlng,{ riseOnHover:true,draggable:true });
    pin.addTo(map);
    pin.on('drag',function(ev) {
      $('#acff-post-field_66575345d723e').val(ev.latlng.lat+', '+ev.latlng.lng);
      $('#lng').val(ev.latlng.lng);
    });
  }
});
</script>
</body>

我尝试了多种方法，但没有效果

leaflet maps jquery-location-picker
1个回答
0
投票

除非有充分的理由使用旧版本的 Leaflet，否则请使用截至 2024 年 6 月 11 日的最新版本，版本 1.9.4。

在 leafletjs.com 上有关于如何使用 Leaflet 的很棒的教程。在查看您的问题之前，让我们先稍微清理一下您的代码。 （请注意，我使用的是普通 JavaScript，而不是 jQuery。）

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- other head tags such as title ... --> 

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">

    <style>
        #map {
            height: 300px;
        }
    </style>

</head>
<body>

    <div id="map"></div>

    <script>
        const map = L.map('map').setView([-6.175, 106.827], 8);

        const basemap = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            // add a link to OpenStreetMap (omitted here for shorter line width)
            attribution: '&copy; OpenStreetMap contributors'
        });
        basemap.addTo(map);
    </script>
    
</body>
</html>

此示例显示了一个简单的底图。

我假设某处有一个 ID 为 

acff-post-field_66575345d723e
的输入字段。让我们为此示例添加简单的输入字段。我选择另一个 ID（第一个输入字段为 
location1
，第二个输入字段为 
location2
）来简化代码：

<input type="text" name="location1" id="location1">
<input type="text" name="location2" id="location2">

接下来，我们将为标记添加 

L.layerGroup
：

const markerLayer = L.layerGroup();
markerLayer.addTo(map);

接下来，我们要向地图添加图钉，您需要监听 

click
事件，正如您已经弄清楚的那样。

map.on('click', function(e) {
    // ...
});

现在，我们在 

click
事件发生时添加标记。如果我正确理解你的问题，你希望地图上最多有 2 个图钉。

map.on('click', (e) => {

    const pinNumber = markerLayer.getLayers().length + 1;

    if (pinNumber > 2) {
        return;  // no additional markers allowed
    }

    const inputElement = document.getElementById(`location${pinNumber}`);

    const marker = L.marker(e.latlng, {
        id: pinNumber,
        title: `Pin ${pinNumber}`,
        riseOnHover: true, 
        draggable: true,
    });

    markerLayer.addLayer(marker);

    inputElement.value = `${e.latlng.lat}, ${e.latlng.lng}`;

});

最后，正如您也发现的那样，您将向标记附加一个 

drag
事件侦听器：

map.on('click', (e) => {

    // ...

    markerLayer.addLayer(marker);

    marker.on('drag', (e) => {
        inputElement.value = `${e.latlng.lat}, ${e.latlng.lng}`;
    });

    inputElement.value = `${e.latlng.lat}, ${e.latlng.lng}`;

});

这是一个可运行的示例：

const map = L.map('map')
  .setView([-6.175, 106.827], 8);

const basemap = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  // add a link to OpenStreetMap (omitted here for shorter line width)
  attribution: '&copy; OpenStreetMap contributors'
});
basemap.addTo(map);

const markerLayer = L.layerGroup();
markerLayer.addTo(map);

map.on('click', (e) => {

  const pinNumber = markerLayer.getLayers().length + 1;

  if (pinNumber > 2) {
    return; // maximal 2 pins on map
  }

  const inputElement = document.getElementById(`location${pinNumber}`);

  const marker = L.marker(e.latlng, {
    id: pinNumber,
    title: `Pin ${pinNumber}`,
    riseOnHover: true,
    draggable: true,
  });

  markerLayer.addLayer(marker);

  marker.on('drag', (e) => {
    inputElement.value = `${e.latlng.lat}, ${e.latlng.lng}`;
  });

  inputElement.value = `${e.latlng.lat}, ${e.latlng.lng}`;

});
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Example</title>

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">

  <style>
    #map {
      height: 300px;
      margin-bottom: 1rem;
    }
  </style>

</head>

<body>

  <div id="map"></div>

  <input type="text" name="location1" id="location1">
  <input type="text" name="location2" id="location2">


</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.