2012-09-25 4 views
1

지도에 여러 다각형이있는 지리적 영역을 표시하려면 전단지를 사용하고 각 레이어를 클릭하여 웹 페이지에 연결하고 싶습니다. 예를 들어 링크 (http://wikipedia.com)는 "경고 ("+ e.latlng에서지도를 클릭 함) " 당신이 도움을전단지 다각형에 외부 링크 추가

var map = L.map('map').setView([45.7676067, 4.8351733], 6); 

    var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', { 
     attribution: 'Map data © 2011 OpenStreetMap, Imagery © 2012 CloudMade', 
     key: 'My Key', 
     styleId: 22677 
    }).addTo(map); 


    // control that shows state info on hover 
    var info = L.control(); 

    info.onAdd = function (map) { 
     this._div = L.DomUtil.create('div', 'info'); 
     this.update(); 
     return this._div; 
    }; 

    info.update = function (props) { 
     this._div.innerHTML = '<h4>Région</h4>' + (props ? 
      '<b>' + props.Name + '</b><br />' 
      : 'Survollez une région'); 
    }; 

    info.addTo(map); 


    // get color depending on population density value 
    function getColor(d) { 
     return d > 1000 ? '#800026' : 
       d > 500 ? '#BD0026' : 
       d > 200 ? '#E31A1C' : 
       d > 100 ? '#FC4E2A' : 
       d > 50 ? '#FD8D3C' : 
       d > 20 ? '#FEB24C' : 
       d > 10 ? '#FED976' : 
          '#FFEDA0'; 
    } 

    function style(feature) { 
     return { 
      weight: 2, 
      opacity: 1, 
      color: 'white', 
      dashArray: '3', 
      fillOpacity: 0.7, 
      fillColor: getColor('10') 
     }; 
    } 

    function highlightFeature(e) { 
     var layer = e.target; 

     layer.setStyle({ 
      weight: 3, 
      color: '#666', 
      dashArray: '', 
      fillOpacity: 0.7, 
      fillColor: getColor('50') 
     }); 

     if (!L.Browser.ie && !L.Browser.opera) { 
      layer.bringToFront(); 
     } 

     info.update(layer.feature.properties); 
    } 

    var geojson; 

    function resetHighlight(e) { 
     geojson.resetStyle(e.target); 
     info.update(); 
    } 

    function zoomToFeature(e) { 
     map.fitBounds(e.target.getBounds()); 
    } 

    function onMapClick(e) { 
     alert("You clicked the map at " + e.latlng); 
    } 

    map.on('click', onMapClick); 

    function onEachFeature(feature, layer) { 
     layer.on({ 
      mouseover: highlightFeature, 
      mouseout: resetHighlight, 
      //click: zoomToFeature 
      click: onMapClick 
     }); 
    } 

    geojson = L.geoJson(regions, { 
     style: style, 
     onEachFeature: onEachFeature 
    }).addTo(map); 


</script> 

감사

답변

1

당신은 onMapClick 기능에 리디렉션 간단한 창을 사용할 수 있어야합니다 :

window.location = "http://www.google.com" 

을하거나 새 탭이나 창에서 열려 window.open을 사용하십시오

+0

매우 간단합니다! 고마워. –