2016-09-08 9 views
0

GoogleマップでzoomListeneイベントを使用しようとしていますので、軸のサイズを変更することができます。最初は、リスナーがズームレベルの変更を検出したかどうかを確認できるようにアラートを使用しようとしていますが、アラートを受け取ることはできません。誰もが問題を参照していzoom_changedリスナーがうまくいきません

<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>Google Maps - pygmaps </title> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script> 
<script type="text/javascript"> 
    var map; 
    function initialize() { 
     var centerlatlng = new google.maps.LatLng(49.801674, 11.188139); 
     var myOptions = { 
      zoom: 18, 
      center: centerlatlng, 
      scaleControl:true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

*プロットするもの*

google.maps.event.addDomListener(window, 'load',initialize); 
google.maps.event.addDomListener(maps,'zoom_changed', function() 
{ 
    alert("changed"); 
}); 

</script> 
</head> 
<body> 

    <div style="text-align:center;"> 
     <button onclick="draw_axis()">Enable/Disable Axis</button> <br><br> <div id="log"></div> 
    </div> 
    <div id="map_canvas" style="width: 100%; height: 90%;"></div> 
    </body> 
    </html> 

:私のコードは次のようですか? ありがとうございます

答えて

2

あなたがzoom_changedリスナーを作成するときにmap変数が定義されていない、それは後で作成され、初期化関数を実行(も変数がmap、ないmapsです)。

コードスニペット:

var map; 
 

 
function initialize() { 
 
    var centerlatlng = new google.maps.LatLng(49.801674, 11.188139); 
 
    var myOptions = { 
 
    zoom: 18, 
 
    center: centerlatlng, 
 
    scaleControl: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    google.maps.event.addDomListener(map, 'zoom_changed', function() { 
 
    alert("changed"); 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div style="text-align:center;"> 
 
    <div id="log"></div> 
 
</div> 
 
<div id="map_canvas" style="width: 100%; height: 90%;"></div>

1

あなたのinitialize()機能内でgoogle.maps.Mapのインスタンスにzoom_changedイベントを設定する必要があります。

map.addListener('zoom_changed', function() { 
    alert("changed"); 
}); 
+0

おかげでたくさん!それはあなたが言ったように働く。 – paulzaba

関連する問題