-1

マップ上にプッシュピンを表示するために、少しhtmlページを書きました。 私は私のウェブページにいくつかのアドレスを与え、次に私はジオコーディング()を使用し、私はプッシュピンを表示します。ジオコーディングとアニメーション.dropはタイムアウトと互換性がありませんか?

次に、GoogleマップAPIページで説明したように、google.maps.Animation.DROPにタイムアウトを追加します。 (https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration?hl=fr

Google Maps APIページでは、サンプルコードで直接座標が使用されます。それは簡単です。私の場合は

、私はその後、画鋲を表示し、ポイントを得るためにジオコーディング()前に使用する必要があります。

私は実際にはわかりませんが、ジオコーディングを使用してこのドロップアニメーションをタイムアウトで使用することはできません。 Chromeでデバッガビューを使用しましたが、わかりません。ここで

は私のコードですが、私は可能な限りシンプルな実行しようとしました:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<style> 
    html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    #map { 
     width:100%; 
     height:100%; 
    } 
</style> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps</title> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAs4c8xnkxcZNRK6yQt-Y21N1L3mT1AFfE&callback=initMap"> 
</script> 
</head> 
<body> 

<div id="map" ></div> 

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
    However, it seems JavaScript is either disabled or not supported by your browser. 
    To view Google Maps, enable JavaScript by changing your browser options, and then 
    try again. 
</noscript> 

<script type="text/javascript"> 
//<![CDATA[ 

var infoWindow; 
var map; 
var geocoder; 
var bounds; 
var TbCoordonnees  = []; 
var TbMarkers   = []; 
var AdresseTiersTb  = []; 

function initMap() 
{ 

    geocoder = new google.maps.Geocoder(); 
    var optionsCarte = { 
          zoom: 8, 
          center: new google.maps.LatLng(48.5, 2.9), 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
         }; 

    map = new google.maps.Map(document.getElementById('map'), optionsCarte); 

    bounds = new google.maps.LatLngBounds(); 

    infoWindow = new google.maps.InfoWindow({}); 

    // EXAMPLE : 

    AdresseTiersTb.push("39 Boulevard de Courtais, 03100 Montluçon"); 
    AdresseTiersTb.push("Place de l'Hôtel de ville, 13100 Aix-en-Provence"); 
    AdresseTiersTb.push("55 Rue du Faubourg Saint-Honoré, 75008 Paris"); 
    AdresseTiersTb.push("Place des Buisses, 59000 Lille"); 

    for (var i = 0; i < AdresseTiersTb.length; i++) 
    { 
     geocodeAddress(AdresseTiersTb[i],i*200);   
    } 

} 

function geocodeAddress(address,timeout) 
{ 
    geocoder.geocode(
    {'address': address}, 
     function(results, status) 
     { 
      if((results != null) && (status == google.maps.GeocoderStatus.OK)) 
      { 
       var marker = createMarker(address,timeout,results); 
      } 
      else 
      { 
       alert("geocode failed on "+address+", status="+status); 
      } 
     } 
    ); 
} 

function createMarker(address,timeout,results) 
{ 
    var marker; 

    window.setTimeout(function() { 
    marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location,animation: google.maps.Animation.DROP 
       });},timeout); 


    bounds.extend(results[0].geometry.location); 
    map.fitBounds(bounds) 
    map.panToBounds(bounds); 
    map.setCenter(bounds.getCenter()); 

    var infocontent = address; 

    google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(infocontent); 
      infoWindow.open(map, marker); 
    }); 
    return marker; 
} 

function listenMarker (marker, info) 
{ 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(info); 
    infoWindow.open(map, this); 
    }); 
} 




</script> 

問題がVAR マーカーはそう画鋲一度何の画鋲ではなく3で表示されていない、未定義ように見えるです。なぜ私はデバッグモードで見るとき、私はジオコーディングがどのように実行されるのか理解していません。非常に奇妙な。

+0

投稿コードでUncaught ReferenceError:Adress is not definedのjavascriptエラーが発生しました – geocodezip

+0

申し訳ありませんが間違いでした。コードを単純化して、わかりやすく表示します。私はちょうど修正した。 –

+0

これで3つのアラートが表示されます。「ジオコードが自分のアドレスで失敗しました。ステータス= ZERO_RESULTS」です。あなたの問題を示す[最小、完全、テスト済みおよび読みやすい例](http://stackoverflow.com/help/mcve)を提供してください。 – geocodezip

答えて

1

変数の有用な値を、非同期のsetTimeoutコールバック関数(マップを作成してマップに追加する)から返すことはできません。それはいくつかの時間後に実行さsetTimeout呼び出し()のコールバックによって定義される前に、関数はすぐに(変数を返しますが、clickイベントリスナーを追加しているとき。も定義されていません。

proof of concept fiddle

コードスニペット:

var infoWindow; 
 
var map; 
 
var geocoder; 
 
var bounds; 
 
var TbCoordonnees = []; 
 
var TbMarkers = []; 
 
var AdresseTiersTb = []; 
 

 
function initMap() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var optionsCarte = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(48.5, 2.9), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map'), optionsCarte); 
 
    bounds = new google.maps.LatLngBounds(); 
 
    infoWindow = new google.maps.InfoWindow({}); 
 

 
    // EXAMPLE : 
 
    AdresseTiersTb.push("Versailles, FR"); 
 
    AdresseTiersTb.push("Paris, FR"); 
 
    AdresseTiersTb.push("Sens, FR"); 
 

 
    for (var i = 0; i < AdresseTiersTb.length; i++) { 
 
    geocodeAddress(AdresseTiersTb[i], i * 200); 
 
    } 
 
} 
 

 
function geocodeAddress(address, timeout) { 
 
    // function closure on address. 
 
    geocoder.geocode({ 
 
     'address': address 
 
    }, 
 
    function(results, status) { 
 
     if ((results != null) && (status == google.maps.GeocoderStatus.OK)) { 
 
     createMarker(address, results[0].geometry.location, timeout); 
 
     bounds.extend(results[0].geometry.location); 
 
     map.fitBounds(bounds) 
 
     } else { 
 
     alert("geocode failed on " + address + ", status=" + status); 
 
     } 
 
    } 
 
); 
 
} 
 

 
function createMarker(address, latLng, timeout) { 
 
    // function closure on address, latLng 
 
    window.setTimeout(function() { 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: latLng, 
 
     animation: google.maps.Animation.DROP 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, address) { 
 
     // function closure on marker, address 
 
     return function() { 
 
     infoWindow.setContent(address); 
 
     infoWindow.open(map, marker); 
 
     } 
 
    })(marker, address)); 
 
    }, timeout); 
 
} 
 

 
function listenMarker(marker, info) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(info); 
 
    infoWindow.open(map, this); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initMap);
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

+0

非常に良い答えです!どうもありがとう :) –

関連する問題