2

ボタンをクリックしてマーカーを読み込もうとしていますが、どこかで何かが欠けています。1. ボタンを 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 関数が load 関数に対してローカルであることです。HTML 要素のクリック関数によって呼び出されるには、グローバルである必要があります。

サンプルコードに基づくライブワーキングバージョン

于 2012-10-04T18:00:50.923 に答える
1

関数getmarkers()は、forループですべてのマーカーを取得するように設計されています

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

一度に1つのマーカーをロードするには、ボタンをクリックするたびにマーカーをインクリメントする必要があります

つまり、 getmarkers Var i =0()の最後でiをグローバルにインクリメントしますi++

配列の最後のメンバーが到達したら、増分を停止する必要がありますmarkers.length

于 2012-10-04T18:49:48.193 に答える
1

グローバルスコープでマップ変数を宣言していないようです。ロード関数のスコープでのみ、それをグローバル変数として宣言すると機能するはずです。

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 に答える