如何动态加载MySQL数据库中的标记?

时间:2010-11-26 21:51:04

标签: php mysql ajax google-maps

我有一个MySQL数据库,我存储了一些标记位置(以及其他一些信息),我加载到谷歌地图。我按照例子 -

http://code.google.com/apis/maps/articles/phpsqlajax.html

它对我来说很好。

现在我想要做的是,假设用户可以选择特定标记的ID并单击它将加载到地图上的按钮。不确定如何动态加载地图上的特定标记。

任何形式的帮助都将受到赞赏。

3 个答案:

答案 0 :(得分:3)

我已经设置了一个示例here。我正在使用Google Geocoding API接收用户输入的地址的坐标,并使用Google API V3创建标记,如下所示
Ajax请求获得坐标

$.getJSON("getjson.php?address="+address,
  function(data){
   lat=data.results[0].geometry.location.lat;
   lng=data.results[0].geometry.location.lng;
   point= new google.maps.LatLng(lat,lng);
   map.setCenter(point);
   zoom = 14;
   marker = createMarker(point,"<h3>Marker"+(markersArray.length+1)+" "+point+"</h3>",zoom);
});

返回坐标的PHP代码

<?php

$address = $_GET['address'];
$address=str_replace(" ","+",$address);
if ($address) {
 $json = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.$address.
 '&sensor=true');
 echo $json;
}

?>

制作标记

function createMarker(latlng, html,zoom) {
   var contentString = html;
    var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  zIndex: Math.round(latlng.lat()*-100000)<<5
 });

 google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent(contentString); 
  infowindow.open(map,marker);
 });
 marker.MyZoom = zoom; 
 return marker; 
} 

答案 1 :(得分:1)

首先,我在你的链接中看到你使用v2.尝试至少使用v3,因为你已经弃用v2了。

至于你的问题,我只能告诉你程序,然后你才能实现。


<强> 1。用户互动
    用户与UI交互并选择一系列价格(0-100)。

<强> 2。 Ajax请求
客户端向服务器发送ajax请求,以jquery getJson()或任何其他方式获取json。

第3。服务器响应
  一个php页面响应你的ajax调用并在mysql中查询获得位置标记的结果集converts it in json并将其发回。

<强> 4。解析回复
Parse the json返回客户端并创建标记。

答案 2 :(得分:0)

嗨,我发现这个很有帮助 http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/

创建一个json对象,如给定链接并将其传递给javascript。

function createMarker(json){

for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
    latLng = new google.maps.LatLng(data.lat, data.lng);        
    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: data.title
    });
}

}