반응형
jQuery, JSON, PHP 및 gMap
1) 저는 jQuery와 gMap Google Maps 플러그인을 사용하는 사이트가 있습니다.이 모든 것이 완벽하게 작동하고, 마커를 올바르게 설정하고, 이 솔루션이 정말 마음에 듭니다.다음과 같은 모습입니다.
<script type="text/javascript" src="http://www.google.com/jsapi?key=MyGmapKey"></script>
<script type="text/javascript">
google.load("jquery", '1.3');
google.load("maps");
</script>
<script type="text/javascript" src="/code/js/jquery.gmap-1.1.0-min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#map1").gMap(
{
latitude: 48.7,
longitude: 13.4667,
zoom: 9,
markers: [{latitude: 48.461117, longitude: 13.418795, html: "MY Info Box 1"},
{latitude: 48.531602, longitude: 12.942087, html: "Another Info Box"},
{latitude: 48.198242, longitude: 13.536017, html: "Guess what? This is INFO Text!"},
{latitude: 48.325327094, longitude: 14.0712547302, html: "INFO"},
{latitude: 48.7, longitude: 13.4667,icon: { image: "images/My_Position.png", iconsize: [20, 34], iconanchor: [5, 34], infowindowanchor: [5, 2], infoshadowanchor: [14, 25] }, html: "Your current position: 48.7 | 13.4667, Germany"}],
controls: ["GSmallZoomControl3D", "GMapTypeControl"],
scrollwheel: true,
maptype: G_HYBRID_MAP,
html_prepend: '<div class="gmap_marker">',
html_append: '</div>',
icon:
{
image: "images/gmap_pin.png",
shadow: false,
iconsize: [19, 21],
shadowsize: false,
iconanchor: [4, 19],
infowindowanchor: [8, 2]
}
});
//Trailing "}" missing here...
</script>
<style type="text/css" media="screen">
#map1{ float:left; width:500px; height:500px; overflow:hidden; margin: 20px; }
.gmap_marker { font-family:Geneva, Arial, Helvetica, sans-serif; color:#0000CC; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="map1"></div>
</body>
</html>
이제 나의 문제:
외부 파일에서 새로운 "마커" 데이터를 가져오는 "onmoveend" 기능을 추가했습니다.마커가 올바르게 표시되지 않고 LAST Item만 표시됩니다.아주 작은 일이겠지만, 지금 길을 잃었어요...
제가 하는 일은 이렇습니다.
2) 이 스크립트를 추가했습니다.
if (GBrowserIsCompatible())
{
var map = $gmap;
var center = new GLatLng(<?=$_GET['lat']?>,<?=$_GET['lon']?>);
GEvent.addListener(map, "moveend", function()
{
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
var lat = center.lat();
var lng = center.lng();
document.getElementById("lat").value = lat;
document.getElementById("lng").value = lng;
GEvent.addListener(marker, "dragend", function()
{
var point=marker.getPoint();
map.panTo(point);
var lat = point.lat();
var lng = point.lng();
document.getElementById("lat").value = lat;
document.getElementById("lng").value = lng;
});
$.getJSON('loader.php', { lat: lat, lng: lng, rad: <?=$rad?>} , function(data) {
$("#map").gMap(
{
latitude: lat,
longitude: lng,
zoom: 9,
markers: [data],
controls: ["GSmallZoomControl3D", "GMapTypeControl"], //"GScaleControl",
scrollwheel: true,
maptype: G_HYBRID_MAP,
html_prepend: '<div class="gmap_marker">',
html_append: '</div>',
icon:
{
image: "images/gmap_pin.png",
shadow: false,
iconsize: [19, 21],
shadowsize: false,
iconanchor: [4, 19],
infowindowanchor: [8, 2]
}
});
});
});
그리고 일부 HTML:
<div id="map" style="float:left; width:500px; height:500px; overflow:hidden; margin: 20px;"></div>
Current coordinates: <br>
<b>Latitude:</b> <input type="text" size="34" name="latitude" value="" id="lat" /><br>
<b>Longitude:</b><input type="text" size="34" name="longitude" value="" id="lng" />
첫 번째 맵을 이동하면 두 번째 맵이 표시됩니다. 이 맵은 새 마커를 "보아야" 합니다.loader.php.
로더. php:
데이터베이스에서 새로운 "close to me" 항목을 가져온 다음 샘플 1에서 사용된 것과 유사한 문자열을 "빌드"합니다.
다음과 같습니다.
$MyNewPositionMarker.='{latitude: '. $_GET['lat'].', longitude: '. $_GET['lng'].', html: "'.$html.'"},' ;
//Getting database results while
while($row = mysql_fetch_assoc($result))
{
$markers.='{latitude: '.$row['odin_facility_lat'].', longitude: '.$row['odin_facility_lon'].', html: "'.$html.'"},' ;
}
echo $markers.$MyNewPositionMarker
에 의해 반환되는 값loader.php샘플 1)에 따라 정확히 어떤 모습을 보여야 하는지 "보기"합니다.
제 문제는 제가 생각하기엔$.getJSON암호화/복호화 문제 같은 것도 있었지만, 밤새워, ("normal $.get") 서로 다른 형식의 반환을 시도했습니다.loader.php, 하지만 모두 성공하지 못했습니다.
지금 당장은 괜찮아 보이는데 아쉽게도 지도에 마지막 마커 세트만 있어요.jQuery 플러그인, 즉 마커를 "설정"하는 것은 여기에서 확인할 수 있습니다: http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js
(나는 원을 그리고 당신들이 해명하기를 바라고 있습니다.)
Loader.php의 작은 크기입니다.
echo "[".$markers.$MyNewPositionMarker."]";
//and removed the [] at the position when loading the new map: WRONG... markers: [data], ... RIGHT: ... markers: data, ...
(이는 "답변되지 않은" 목록에서 질문을 제거하기 위해 주석에 솔루션을 복사하여 붙여넣은 것일 뿐입니다.)
언급URL : https://stackoverflow.com/questions/3475052/jquery-json-php-and-gmap
반응형
'programing' 카테고리의 다른 글
| 수표와 외국 열쇠의 차이점은 무엇입니까? (0) | 2023.10.20 |
|---|---|
| Android의 strings.xml 파일에 오류가 발생했습니다. (0) | 2023.10.20 |
| 함수 내부의 구조를 정의할 때 "벌점"이 있습니까? (0) | 2023.10.20 |
| 제품 페이지에서 클릭 가능한 이미지 방지, 제품-이미지 링크 비활성화 (0) | 2023.10.20 |
| Mysql 날짜 함수가 다음 시간 동안 작동하지 않습니다. (0) | 2023.10.15 |