2012-05-05 4 views
0

Я пытаюсь отобразить пару маркеров на карте 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> 

Потратил время на это, консультируясь ссылки API Карт Google, но просто не могу понять, почему он не работает.

Любое понимание оценено - спасибо.

+0

О - Я бы использовать свой апи код вместо MY_API_KEY, конечно :) – ploddingOn

+0

Почему вы используете этот подход? Вы должны хранить широту, долготу и заголовок в массиве, а затем использовать цикл for для добавления данных. В противном случае, если вы хотите сохранить этот подход, переименуйте свой второй переменный marker2 (или что-то в этом роде) и добавьте прослушиватель событий для marker2 (или как бы вы его назовете). – andresf

+0

Старый вопрос, который я знаю, но я задал тот же вопрос здесь, а затем сам решил его решить: http://stackoverflow.com/questions/15273835/google-maps-apis-clicking-marker-zooms-in-on-wrong -один –

ответ

2
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; 
      } 
     });