以标记为中心，谷歌地图API

我试图在谷歌地图上显示几个标记，并允许用户在地图上点击标记时将标记居中。以标记为中心，谷歌地图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的参考，但就是无法弄清楚，为什么它不工作。

任何见解赞赏 - 谢谢。

来源

2012-05-05 ploddingOn

哦 - 我为什么要使用这种方法可以用在地方MY_API_KEY我的API代码，当然:) – ploddingOn

的？您应该将纬度，经度和标题存储在数组中，然后使用for循环来添加数据。否则，如果你想保持这种方式，重命名你的第二个变量marker2（或类似的东西），并为marker2（或任何你命名它）添加一个事件侦听器。 – andresf

我知道的老问题，但我在这里发布了相同的问题，然后设法自己解决它： http://stackoverflow.com/questions/15273835/google-maps-apis-clicking-marker-zooms-in-on-wrong -一 –

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

以标记为中心，谷歌地图API

回答

相关问题