Question

我试图点击按钮加载标记，但某处我错过了某些东西。 1.地图拉出并点击一键加载。 2.通过单击不同的按钮加载标记。这就是我所拥有的：

<!DOCTYPE>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>

<link rel="stylesheet" type="text/css" href="
    <?php  
        $stylesarray = array("field");  
        echo $stylesarray[mt_rand(0,count($stylesarray)-1)];  
    ?>.css">

<link rel="shortcut icon" href="images/favicon.ico">
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false"></script>
<script type="text/javascript"> 

var map = null;

$(document).ready(function(){   

    var lat=document.getElementById("latitude");
    var long=document.getElementById("longitude");       
    if (navigator.geolocation){
         navigator.geolocation.getCurrentPosition(showPosition); 
    } 
     function showPosition(position) {
         lat.value=+position.coords.latitude;
         long.value=+position.coords.longitude;
     }   
    });

function load() {

var map = new google.maps.Map(document.getElementById("mapcontainer"), {
    center: new google.maps.LatLng(20,0),
    zoom: 3,
    styles: mapstyle,
    mapTypeControl: false,
    navigationControl: false,
    streetViewControl: false,
    maxZoom: 8,
    minZoom: 3,
    mapTypeId: 'roadmap'
  });
}

function getmarkers(){
  downloadUrl("markers.php", function(data) {
    //alert ("it works");
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var id = markers[i].getAttribute("id");
      var info = markers[i].getAttribute("info");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("latitude")),
          parseFloat(markers[i].getAttribute("longitude")));
      var date = markers[i].getAttribute("date");
      var html =  "<div id='tooltip'><div id='tiptext'>" + info
                  + "<div id='number'>" + id + "</div>"
                  + "<div id='date'>" + date + "</div>" 
                  +  "</div></div>";
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: 'images/mapicon.png'

      });         
      createTooltip(marker, html);
    }
  });

</script>
  </head>
  <body>
<div id="mapcontainer">
<form>
    <input type="button" id="map" onClick="load()"></input>  
</form>
<form> 
    <input type="button" onClick="getmarkers()"></input>
</form>

</body>
</html>

xml示例：

<markers>
<marker id="330" info="blahblah" date="2012-10-03" latitude="20.00" longitude="-81.00"/>
</markers>

Answer 1

您的地图变量是初始化函数的本地变量。加载标记的代码无法访问它。

尝试全局定义（在任何函数之外）：

var map = null;

然后在你的加载函数中初始化它

function load() {
map = new google.maps.Map(document.getElementById("mapcontainer"), {

发布代码的问题（在语法错误之后）是getmarkers函数是加载函数的本地函数。它需要是全局的，才能被HTML元素点击功能调用。

Live working version based off your example code

Answer 2

您似乎没有在全局范围内声明map变量。仅在加载函数范围内，将其声明为全局变量，它应该可以工作。

var map = null; // Declaring map in the global scope

function load() {
    // map references to global scope
    map = new google.maps.Map(document.getElementById("mapcontainer"), {
    ...
}

downloadUrl("markerinfo.php", function(data) {
      ...
      var marker = new google.maps.Marker({
        map: map, // map references to global scope
        position: point,
        icon: 'images/mapicon.png'

      });         
      createTooltip(marker, html);
    }
});

尝试将DownloadUrl函数调用包装在另一个函数中，然后调用它。

<input type="button" id="markerload" onClick="getMarkers()"></input>

function getMarkers() {
    downloadUrl("markerinfo.php", function(data) {
        ...
    });
}

Answer 3

函数getmarkers（）用于检索带有for循环的所有标记

for (var i = 0; i < markers.length; i++) {

要一次加载一个标记，您需要为每个按钮单击增加

即全球Var i =0 在getmarkers（）i++

结尾处增加i

当数组的最后一个成员到达markers.length

时，你应该停止增量

谷歌地图按钮点击加载地图 - 用另一个按钮加载标记

3 个答案: