jQuery、JSON、PHP 和 gMap
Posted
技术标签:
【中文标题】jQuery、JSON、PHP 和 gMap【英文标题】：jQuery, JSON, PHP and gMap 【发布时间】：2011-03-29 08:26:13 【问题描述】：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”函数，它将从外部文件中获取新的“标记”数据。一切都很好，只是标记显示不正确，只会显示最后一个项目。我敢打赌这只是一件小事，但我现在迷路了......
这是我的工作：
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 返回的新标记。
loader.php：
它从数据库中获取新的“靠近我”条目，然后“构建”类似于示例 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 和某种“编码/解码”问题有关，但我花了一整夜，来回尝试（“正常 $.get”），@ 中的不同返回格式987654332@，但都没有成功。
现在，它看起来不错，但不幸的是，我刚刚在我的地图上设置了 LAST 标记。可以在这里找到用于“设置”标记的 jQuery 插件：http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js
（我在转圈，希望你们能澄清一下……）
【问题讨论】：
你可以在这里看到它：divessi.com/code/geo/stack_demo.php OK - 找到了第一个解决方案......正如建议的那样，它只是一件小事...... Loader.php: echo "[".$markers.$MyNewPositionMarker."]";并在加载新地图时删除了该位置的[]：错误...标记：[数据]，...右：...标记：数据，... 请用该解决方案回答您的问题并将其标记为已接受:) 请回答您自己的问题...防止其他人头疼再次回答它 【参考方案1】：这只是Loader.php中的一个小东西：
echo "[".$markers.$MyNewPositionMarker."]";
//and removed the [] at the position when loading the new map: WRONG... markers: [data], ... RIGHT: ... markers: data, ...
（这只是评论中解决方案的复制粘贴，以从“未回答”列表中删除问题。）
【讨论】：
以上是关于jQuery、JSON、PHP 和 gMap的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery、PHP 和 MySQL 为单选按钮加载 JSON 数据
使用 jQuery、PHP 和 MySQL 为单选按钮加载 JSON 数据