Question

我有一个带有完整窗口图像的HTML页面，一个显示某些内部点的Leaflet地图和一个带有一系列与感兴趣点相对应的图像的旋转木马。感兴趣的点存储在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>

geoJson中的“descr”属性和“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”循环开始不起作用，但我不知道如何解决它。谢谢

Answer 1

你的for循环在Points.length上运行，而不是Points.features.length，“features”是你想要完成的数组。

单击图像时缩放关注点的地图

1 个答案: