單擊圖像時縮放感興趣的地圖上的地圖

我有一個HTML頁面，其中包含完整的窗口圖像，傳單地圖，其中顯示了一些內部點和轉盤以及與感興趣點相對應的一系列圖像。感興趣的點存儲在一個以GeoJSON文件是這樣的：單擊圖像時縮放感興趣的地圖上的地圖

var Points = { 
"type": "FeatureCollection", 
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, 
"features": [ 
{ "type": "Feature", "properties": { "id": 1, "src": "..\/Foto\/Picture1.jpg", "descr": "Picture 1" }, "geometry": { "type": "Point", "coordinates": [ -157.6960968476377, 21.270789615399739 ] } }, 
{ "type": "Feature", "properties": { "id": 2, "src": "..\/Foto\/Picture2.jpg", "descr": "Picture 2" }, "geometry": { "type": "Point", "coordinates": [ -158.05145417649172, 21.528447405119081 ] } } 
] 
}

當我在地圖上或旋轉木馬點擊POI因此整個窗口圖像的變化，並顯示相應的圖像。我也想這樣，當我點擊旋轉木馬上的圖像時，地圖會縮放到相應的位置。這是HTML：

<div class="container-fluid" id="image-container"> 
    <!-- BIG BACKGROUND IMAGE --> 
    <img id= "bigImg" src="../Foto/Pippo.jpg" alt="Pippo"> <!-- default image --> 
    <!-- HOME PAGE TITLE AND SUBTITLE --> 
    <div class="container-fluid" id="text-container"> 
     <h1>Title</h1> 
     <p>SubTitle</p> 
    </div> 
    <div class="container-fluid" id="caption-container"></div> 
    <!-- MAP --> 
    <div class="map" id="mainMap"></div> 
    <!-- CAROUSEL --> 
    <div class="container-fluid" id="carousel-container"> 
     <div class="row"> 
      <div class="span12"> 
       <div class="well"> 
        <div id="myCarousel" class="carousel slide"> 
        <!-- Indicators --> 
         <ol class="carousel-indicators"> 
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
         </ol> 
         <!-- Carousel items --> 
         <div class="carousel-inner" role="listbox"> 
          <div class="item active"> 
           <div class="row-fluid"> 
            <div class="col-sm-1"> 
             <div class="carousel-caption"><p>Picture 1</p></div> 
             <a href="#x" class="thumbnail"><img id="Picture1" class="photoThumbnail" src="../Foto/Picture1.jpg" alt="Picture 1" style="cursor:pointer" title="Picture 1"></a>        
            </div> 
            <div class="col-sm-1"> 
             <div class="carousel-caption"><p>Picture 2</p></div> 
             <a href="#x" class="thumbnail"><img id="Picture2" class="photoThumbnail" src="../Foto/Picture2.jpg" alt="Picture 2" style="cursor:pointer" title="Picture "></a>  
            </div> 
           </div><!--/row-fluid--> 
          </div><!--/item-->      
         </div><!--/carousel-inner--> 
        </div><!--/myCarousel--> 
       </div><!--/well--> 
      </div> 
     </div> 
    </div> 
</div>

「DESCR」在GeoJSON的財產和「alt」屬性是相同的。這是我的js：

$(".photoThumbnail").click(function(){ 
    var imgsrc = this.src; 
    $("#bigImg").attr('src', imgsrc); 
    var imgalt = this.alt; 
    //from here not working 
    for (var i = 0; i < Points.length; i++) { 
     var PoI = Points[i]; 
     var PoIdescr = PoI.feature.properties.descr; 
     if (PoIdescr = imgalt) { 
      var PoILatLon = PoI.feature.geometry.coordinates; 
      var PoILat = PoILatLon[0]; 
      var PoILon = PoILatLon[1]; 
      mainMap.setView([PoILat, PoILon], 12); 
     } 
    } 
})

它不適用於「for」循環，但我不知道如何解決它。謝謝

來源

2017-03-05 Michela Zanni