打開信息圖層以及點擊標記（傳單）

我想在點擊標記時觸發額外的事件。現在，它會打開一個彈出窗口，但我想在額外的信息層中顯示信息。我已經設法顯示圖層（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>

來源

2015-06-24 user3016936

你會需要修改update函數取一個參數，開始here.You也只需要一次創建這個信息的控制，而不是loop..because內的每個時間你一次只需要打開一個，對吧？

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")。

來源

2015-06-24 16:19:16 snkashis

不幸的是我沒有成功 - 可能是因爲編碼能力太有限......我可以看到我的信息圖層，但是我無法通過單擊標記來連接它。也許它會幫助用其他東西替換？ – user3016936

你可以發佈你的更新代碼到JSFiddle嗎？ – snkashis

當然 - 這裏是：https://jsfiddle.net/euxxznjd/ 這裏是實際的地圖：http://www.schoenberg.at/scans/topo-paris/example/topo-paris.html 我通過點擊顯示信息圖層。但內容總是相同的，信息層越來越多。 – user3016936

打開信息圖層以及點擊標記（傳單）

回答

相關問題