使用PHP/MySQL为Google地图上的标记生成XML文件_Php_Javascript_Xml_Google Maps_Google Maps Api 3

使用PHP/MySQL为Google地图上的标记生成XML文件

php javascript xml google-maps google-maps-api-3

使用PHP/MySQL为Google地图上的标记生成XML文件,php,javascript,xml,google-maps,google-maps-api-3,Php,Javascript,Xml,Google Maps,Google Maps Api 3,我试图通过从数据库中获取信息，在我的谷歌地图画布上放置标记，我跟着他走了每一步虽然不知何故它不起作用（可能是因为我改变了一些事情，尽管我找不到是什么导致了这些麻烦。）我已经通过使用phptoxml.php文件获取了数据。虚拟输出证明了它是正确的，我猜： <users> <user id="1" name="John Tucker" age="19" lat="47.608940" lng="-122.340141" type="0"/> <user id="2

我试图通过从数据库中获取信息，在我的谷歌地图画布上放置标记，我跟着他走了每一步虽然不知何故它不起作用（可能是因为我改变了一些事情，尽管我找不到是什么导致了这些麻烦。）

我已经通过使用phptoxml.php文件获取了数据。虚拟输出证明了它是正确的，我猜：

<users>
<user id="1" name="John Tucker" age="19" lat="47.608940" lng="-122.340141" type="0"/>
<user id="2" name="Dean Jester" age="21" lat="51.219040" lng="4.326590" type="0"/>
<user id="3" name="Joris Nisteven" age="26" lat="51.203671" lng="4.341480" type="0"/>
<user id="4" name="Joske Vermeulen" age="20" lat="51.204155" lng="4.327018" type="0"/>
<user id="5" name="Timmy den Beir" age="21" lat="51.209263" lng="4.339720" type="0"/>
<user id="6" name="Ben von Duppen" age="23" lat="51.168308" lng="4.394287" type="0"/>
</users>

我注意到，如果我在request.send（null）后面添加了一个警报；对于调试信息，它不会弹出。下载URL调用后出现的任何警报也是如此

我不知道，希望有人能帮忙：）

提前付款

有关更多信息，请参阅完整代码：

 <script type="text/javascript">



var map; var fluster; var infoBubble;
  function initialize() {
    var latlng = new google.maps.LatLng(27.059125784374068,-37.6171875);
    var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
fluster = new Fluster2(map);


// Change this depending on the name of your PHP file
downloadUrl("phptoxml.php", function(data) {
    var xml = data.responseXML;
    var users = xml.documentElement.getElementsByTagName("user");
    for (var i = 0; i < users.length; i++) {
        var id = parseInt(users[i].getAttribute("id"));
        var name = users[i].getAttribute("name");
        var age = parseInt(users[i].getAttribute("age"));
        var lat = parseFloat(users[i].getAttribute("lat"));
        var lng = parseFloat(users[i].getAttribute("lng"));
        var marker = add_marker(lat,lng,id,name,age); // pass in as Latitude, then Longitude
        fluster.addMarker(marker);
    }
});

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
    }

    var address = '';
    if (place.address_components) {
        address = [(place.address_components[0] &&
                    place.address_components[0].short_name || ''),
                   (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                   (place.address_components[2] &&
                    place.address_components[2].short_name || '')
                  ].join(' ');
    }
});

// Initialize Fluster
// This will set event handlers on the map and calculate clusters the first time.
fluster.initialize();   



 }




 function add_marker(lat,lng,id,name,age) {

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
      icon: 'suiticon.png',
      title: name
});
    var infoBubble = new InfoBubble({
      maxWidth: 300,
      backgroundColor: '#dedddd',
      borderWidth: 2,
      borderColor: 'rgb(68, 68, 68)'
    });

    var contentString = '<div id="content">'+
        /*'<h2>'+name+'</h2>'+
        '<p><span class="myLabel" style="margin-right:10px">'+age+'</span>21</p>'+
        '<p><center><img src="'+id+'.jpg" class="bro_image"></center> </p>'+
        '<p><button class="button_inverse" style="padding-left: 23px; padding-right:23px; margin-left:31px;" href="#">Rate this Bro!</button></p>'+
        */'</div>';

    var div = document.createElement('DIV');
    div.innerHTML = 'No pictures uploaded by this user.';

    infoBubble.addTab('Personal', contentString);
    infoBubble.addTab('Pictures', div);

    google.maps.event.addListener(marker, 'click', function() {
      if (!infoBubble.isOpen()) {
        infoBubble.open(map, marker);
      }
    }); 

return marker;


}


function addTab() {
    var title = document.getElementById('tab-title').value;
    var content = document.getElementById('tab-content').value;

    if (title != '' && content != '') {
      infoBubble.addTab(title, content);
    }
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);

}
</script>


var映射；弗罗斯特变种；var信息泡沫；
函数初始化（）{
var latlng=新的google.maps.latlng（27.059125784374068，-37.6171875）；
变量myOptions={
缩放：3，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
街景控制：错误
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
fluster=新fluster 2（地图）；
//根据PHP文件的名称更改此选项
下载URL（“phptoxml.php”，函数（数据）{
var xml=data.responseXML；
var users=xml.documentElement.getElementsByTagName（“用户”）；
对于（var i=0；i”+
“给这个兄弟打分！”+
*/'';
var div=document.createElement（'div'）；
div.innerHTML='此用户未上载任何图片'；
infoBubble.addTab（'Personal'，contentString）；
infoBubble.addTab（'Pictures'，div）；
google.maps.event.addListener（标记'click'，函数（）{
如果（！infoBubble.isOpen（））{
打开（地图、标记）；
}
}); 
返回标记；
}
函数addTab（）{
var title=document.getElementById（'tab-title'）。值；
var content=document.getElementById（'tab-content'）。值；
如果（标题！=''&&content！=''）{
infoBubble.addTab（标题、内容）；
}
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}

您将需要ProjectionOverlay，因此请使用Fluster2.packed.js而不是Fluster2.js。这就是你没有收到警告信息的原因

“map”没有在add_marker函数中定义，所以您应该也导入它

下面的代码应该可以工作

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL Example</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?
libraries=places&sensor=false"></script>
    <script type="text/javascript" src="Fluster2.packed.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
    <script type="text/javascript">

var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

var infoBubble;
  function initialize() {
    var latlng = new google.maps.LatLng(27.059125784374068,-37.6171875);
    var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var fluster = new Fluster2(map);

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml3.php", function(data) {
        var xml = data.responseXML;
        var users = xml.documentElement.getElementsByTagName("user");
        for (var i = 0; i < users.length; i++) {
          var id = parseInt(users[i].getAttribute("id"));
          var name = users[i].getAttribute("name");
          var age = users[i].getAttribute("age");
          var type = users[i].getAttribute("type");
          var lat = parseFloat(users[i].getAttribute("lat"));
          var lng = parseFloat(users[i].getAttribute("lng"));
          var content = add_content(lat,lng,id,name,age,type,map); // pass in as Latitude, then Longitude
          fluster.addMarker(content);
        }
      });

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
    }

    var address = '';
    if (place.address_components) {
        address = [(place.address_components[0] &&
                    place.address_components[0].short_name || ''),
                   (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                   (place.address_components[2] &&
                    place.address_components[2].short_name || '')
                  ].join(' ');
    }
});

// Initialize Fluster
// This will set event handlers on the map and calculate clusters the first time.
    fluster.initialize();   
    }

 function add_content(lat,lng,id,name,age,type,map) {
 var icon = customIcons[type] || {};
 var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat,lng),
                    map: map,
                    icon: icon.icon,
                    title: name
                    });

    var contentString = '<div id="content">'+
        /*'<h2>'+name+'</h2>'+
        '<p><span class="myLabel" style="margin-right:10px">'+age+'</span>21</p>'+
        '<p><center><img src="'+id+'.jpg" class="bro_image"></center> </p>'+
        '<p><button class="button_inverse" style="padding-left: 23px; padding-right:23px; margin-left:31px;" href="#">Rate this Bro!</button></p>'+
        */'</div>';

   var infoBubble = new InfoBubble({
      maxWidth: 300,
      backgroundColor: '#dedddd',
      borderWidth: 2,
      borderColor: 'rgb(68, 68, 68)'
    });

    infoBubble.open(map, marker);

    var div = document.createElement('DIV');
    div.innerHTML = 'No pictures uploaded by this user.';

    infoBubble.addTab('Pictures', div);
    infoBubble.addTab('Personal', contentString);

    google.maps.event.addListener(marker, 'click', function() {
      if (!infoBubble.isOpen()) {
        infoBubble.open(map, marker);
      }
    });

return marker;
}

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      alert(url);
      request.send(null);
    }
function doNothing() {}

  </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 800px; height: 550px"></div>
  </body>

</html>


PHP/MySQL示例
var customIcons={
餐厅：{
图标：'http://labs.google.com/ridefinder/images/mm_20_blue.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
酒吧：{
图标：'http://labs.google.com/ridefinder/images/mm_20_red.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var信息泡沫；
函数初始化（）{
var latlng=新的google.maps.latlng（27.059125784374068，-37.6171875）；
变量myOptions={
缩放：3，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
街景控制：错误
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var fluster=新Fluster2（地图）；
//根据PHP文件的名称更改此选项
下载URL（“phpsqlajax_genxml3.php”，函数（数据）{
var xml=data.responseXML；
var users=xml.documentElement.getElementsByTagName（“用户”）；
对于（var i=0；i <script type="text/javascript">



var map; var fluster; var infoBubble;
  function initialize() {
    var latlng = new google.maps.LatLng(27.059125784374068,-37.6171875);
    var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
fluster = new Fluster2(map);


// Change this depending on the name of your PHP file
downloadUrl("phptoxml.php", function(data) {
    var xml = data.responseXML;
    var users = xml.documentElement.getElementsByTagName("user");
    for (var i = 0; i < users.length; i++) {
        var id = parseInt(users[i].getAttribute("id"));
        var name = users[i].getAttribute("name");
        var age = parseInt(users[i].getAttribute("age"));
        var lat = parseFloat(users[i].getAttribute("lat"));
        var lng = parseFloat(users[i].getAttribute("lng"));
        var marker = add_marker(lat,lng,id,name,age); // pass in as Latitude, then Longitude
        fluster.addMarker(marker);
    }
});

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
    }

    var address = '';
    if (place.address_components) {
        address = [(place.address_components[0] &&
                    place.address_components[0].short_name || ''),
                   (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                   (place.address_components[2] &&
                    place.address_components[2].short_name || '')
                  ].join(' ');
    }
});

// Initialize Fluster
// This will set event handlers on the map and calculate clusters the first time.
fluster.initialize();   



 }




 function add_marker(lat,lng,id,name,age) {

var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
      icon: 'suiticon.png',
      title: name
});
    var infoBubble = new InfoBubble({
      maxWidth: 300,
      backgroundColor: '#dedddd',
      borderWidth: 2,
      borderColor: 'rgb(68, 68, 68)'
    });

    var contentString = '<div id="content">'+
        /*'<h2>'+name+'</h2>'+
        '<p><span class="myLabel" style="margin-right:10px">'+age+'</span>21</p>'+
        '<p><center><img src="'+id+'.jpg" class="bro_image"></center> </p>'+
        '<p><button class="button_inverse" style="padding-left: 23px; padding-right:23px; margin-left:31px;" href="#">Rate this Bro!</button></p>'+
        */'</div>';

    var div = document.createElement('DIV');
    div.innerHTML = 'No pictures uploaded by this user.';

    infoBubble.addTab('Personal', contentString);
    infoBubble.addTab('Pictures', div);

    google.maps.event.addListener(marker, 'click', function() {
      if (!infoBubble.isOpen()) {
        infoBubble.open(map, marker);
      }
    }); 

return marker;


}


function addTab() {
    var title = document.getElementById('tab-title').value;
    var content = document.getElementById('tab-content').value;

    if (title != '' && content != '') {
      infoBubble.addTab(title, content);
    }
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);

}
</script>


<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL Example</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?
libraries=places&sensor=false"></script>
    <script type="text/javascript" src="Fluster2.packed.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
    <script type="text/javascript">

var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

var infoBubble;
  function initialize() {
    var latlng = new google.maps.LatLng(27.059125784374068,-37.6171875);
    var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var fluster = new Fluster2(map);

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml3.php", function(data) {
        var xml = data.responseXML;
        var users = xml.documentElement.getElementsByTagName("user");
        for (var i = 0; i < users.length; i++) {
          var id = parseInt(users[i].getAttribute("id"));
          var name = users[i].getAttribute("name");
          var age = users[i].getAttribute("age");
          var type = users[i].getAttribute("type");
          var lat = parseFloat(users[i].getAttribute("lat"));
          var lng = parseFloat(users[i].getAttribute("lng"));
          var content = add_content(lat,lng,id,name,age,type,map); // pass in as Latitude, then Longitude
          fluster.addMarker(content);
        }
      });

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
    }

    var address = '';
    if (place.address_components) {
        address = [(place.address_components[0] &&
                    place.address_components[0].short_name || ''),
                   (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                   (place.address_components[2] &&
                    place.address_components[2].short_name || '')
                  ].join(' ');
    }
});

// Initialize Fluster
// This will set event handlers on the map and calculate clusters the first time.
    fluster.initialize();   
    }

 function add_content(lat,lng,id,name,age,type,map) {
 var icon = customIcons[type] || {};
 var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat,lng),
                    map: map,
                    icon: icon.icon,
                    title: name
                    });

    var contentString = '<div id="content">'+
        /*'<h2>'+name+'</h2>'+
        '<p><span class="myLabel" style="margin-right:10px">'+age+'</span>21</p>'+
        '<p><center><img src="'+id+'.jpg" class="bro_image"></center> </p>'+
        '<p><button class="button_inverse" style="padding-left: 23px; padding-right:23px; margin-left:31px;" href="#">Rate this Bro!</button></p>'+
        */'</div>';

   var infoBubble = new InfoBubble({
      maxWidth: 300,
      backgroundColor: '#dedddd',
      borderWidth: 2,
      borderColor: 'rgb(68, 68, 68)'
    });

    infoBubble.open(map, marker);

    var div = document.createElement('DIV');
    div.innerHTML = 'No pictures uploaded by this user.';

    infoBubble.addTab('Pictures', div);
    infoBubble.addTab('Personal', contentString);

    google.maps.event.addListener(marker, 'click', function() {
      if (!infoBubble.isOpen()) {
        infoBubble.open(map, marker);
      }
    });

return marker;
}

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      alert(url);
      request.send(null);
    }
function doNothing() {}

  </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 800px; height: 550px"></div>
  </body>

</html>