Question

我想在点击标记时触发额外的事件。现在，它打开一个弹出窗口，但我希望在额外的信息层中显示信息。我已设法显示图层（var info），但我不知道如何通过点击标记更改信息。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Schönberg Topography</title>

  <link rel="stylesheet" href="../lib/mapbox.css" />
  <script src="../lib/mapbox.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../dist/MarkerCluster.css" />
  <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
  <script src="../dist/leaflet.markercluster-src.js"></script>
  <script charset="UTF-8" src="topography.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html,
    body,
    #map {
      height: 100%;
    }
    .info {
      padding: 6px 8px;
      font: 14px/16px Arial, Helvetica, sans-serif;
      background: white;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
    .info h4 {
      margin: 0 0 5px;
      color: #777;
    }
  </style>
  <style type="text/css">
    a:link {
      text-decoration: none;
    }
  </style>

</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<body>

  <div id="map"></div>
  <script type="text/javascript">
    var cloudmadeUrl = 'http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
      cloudmadeAttribution = 'Map data &copy; 2011 <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, Imagery &copy; 2011 <a href="http://mapbox.com/" target="_blank">Mapbox</a>, Points &copy 2012 <a href="http://linz.govt.nz/" target="_blank">LINZ</a>',
      cloudmade = new L.TileLayer(cloudmadeUrl, {
        maxZoom: 17,
        attribution: cloudmadeAttribution
      }),
      latlng = new L.LatLng(48.86, 2.34);

    var map = new L.Map('map', {
      center: latlng,
      zoom: 12,
      maxBounds: [
        [49, 2.7],
        [48.7, 2, 45]
      ],
      layers: [cloudmade]
    });

    var markers = new L.MarkerClusterGroup();

    for (var i = 0; i < addressPoints.length; i++) {
      var a = addressPoints[i];
      var title = a[2];
      var name = a[3]
      var colormarker = a[4]
      var typemarker = a[5]
      var marker = L.marker(new L.LatLng(a[0], a[1]), {
        icon: L.mapbox.marker.icon({
          'marker-symbol': typemarker,
          'marker-color': colormarker
        }),
        title: name
      });

      var info = L.control();

      info.onAdd = function() {
        this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
        this.update();
        return this._div;
      };

      // method that we will use to update the control based on feature properties passed
      info.update = function() {
        this._div.innerHTML = title;
      };

      marker.bindPopup(title);
      markers.addLayer(marker);

    }

    map.addLayer(markers);
    info.addTo(map);
  </script>
</body>

</html>

Answer 1

你需要修改你的update函数来从这里开始参数。你也只需要创建一次这个信息控件，而不是每次都在循环中。因为你只需要打开一个是的，对吧？

  info.update = function(content) {
    this._div.innerHTML = content;
  };

请勿忘记更新onAdd有关删除update的信息。

  info.onAdd = function() {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    return this._div;
  };

然后，在标记上的click事件的回调中，您将调用info.update("My new content")。

打开信息图层并点击标记（传单）

1 个答案: