0
전체 창 이미지가있는 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의 재산과 "고도"속성은 동일합니다. 이것은 내 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"주기가 작동하지 않지만이를 해결하는 방법을 알지 못합니다. 감사합니다