マーカーを中心に、Google maps api

私はGoogleマップ上にいくつかのマーカーを表示しようとしています。マーカーをクリックするとマーカー上に地図の中心を置くことができます。マーカーを中心に、Google maps api

しかし、ユーザーがマーカーをクリックすると、マップは常に自分のコードで作成した最後のマーカーの中央に配置されます。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false"> 
</script> 
<script type="text/javascript"> 
function initialize() { 
var myOptions = { 
    center: new google.maps.LatLng(-34, 150), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

var myLatLng = new google.maps.LatLng(34,-150); 

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title:'test' + 1 
}); 

google.maps.event.addListener(marker, 'click', function(){map.setCenter(marker.getPosition());}); 

myLatLng = new google.maps.LatLng(20,-87); 

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title:'test' + 2 
}); 

google.maps.event.addListener(marker, 'click', function(){map.setCenter(marker.getPosition());}); 

} 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

はGoogleマップAPIリファレンスを相談し、この上でしばらく過ごしたが、ちょうどそれが機能しない理由を把握することはできません。

は、ここで私が使用しています完全なコードです。

感謝の気持ち - 感謝します。

出典

2012-05-05 ploddingOn

ああ - 私はもちろん、MY_API_KEYの代わりに私のAPIコードを使用することでしょう:) – ploddingOn

は、なぜあなたは、このアプローチを使用していますか？緯度、経度、およびタイトルを配列に格納し、forループを使用してデータを追加する必要があります。それ以外の場合は、この方法を使用したい場合は、2番目の変数marker2（またはそのようなもの）の名前を変更し、marker2のイベントリスナーを追加します。 – andresf

私は知っている古い質問ですが、私はここで同じ質問を投稿し、自分でそれを解決することができました： http://stackoverflow.com/questions/15273835/google-maps-apis-clicking-marker-zooms-in-on-wrong -1 –

mMap.setOnMarkerClickListener(new OnMarkerClickListener() 
     { 
      @Override 
      public boolean onMarkerClick(Marker marker) 
      { 
       int yMatrix = 200, xMatrix =40; 

       DisplayMetrics metrics1 = new DisplayMetrics(); 
       getWindowManager().getDefaultDisplay().getMetrics(metrics1); 
       switch(metrics1.densityDpi) 
       { 
       case DisplayMetrics.DENSITY_LOW: 
        yMatrix = 80; 
        xMatrix = 20; 
        break; 
       case DisplayMetrics.DENSITY_MEDIUM: 
        yMatrix = 100; 
        xMatrix = 25; 
        break; 
       case DisplayMetrics.DENSITY_HIGH: 
        yMatrix = 150; 
        xMatrix = 30; 
        break; 
       case DisplayMetrics.DENSITY_XHIGH: 
        yMatrix = 200; 
        xMatrix = 40; 
        break; 
       case DisplayMetrics.DENSITY_XXHIGH: 
        yMatrix = 200; 
        xMatrix = 50; 
        break; 
       } 

       Projection projection = mMap.getProjection(); 
       LatLng latLng = marker.getPosition(); 
       Point point = projection.toScreenLocation(latLng); 
       Point point2 = new Point(point.x+xMatrix,point.y-yMatrix); 

       LatLng point3 = projection.fromScreenLocation(point2); 
       CameraUpdate zoom1 = CameraUpdateFactory.newLatLng(point3); 
       mMap.animateCamera(zoom1); 
       marker.showInfoWindow(); 
       return true; 
      } 
     });

出典

2013-10-14 11:37:12

マーカーを中心に、Google maps api

答えて

関連する問題