2

我正在尝试通过单击按钮加载标记，但在某处我遗漏了一些东西。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>
4

3 回答 3

2

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

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

var map = null;

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

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

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

基于您的示例代码的实时工作版本

于 2012-10-04T18:00:50.923 回答
1

似乎您没有在全局范围内声明 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) {
        ...
    });
}
于 2012-10-04T18:06:07.140 回答
1

函数 getmarkers() 旨在通过 for 循环检索所有标记

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

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

即Var i =0在 getmarkers() 结束时全局递增 ii++

您应该在数组的最后一个成员到达时停止增量markers.length

于 2012-10-04T18:49:48.193 回答