将双地图程序从Google Maps apiV2升级到apiV3

Question

我有一个Google地图API V2脚本，允许两个不同大小和缩放级别的地图一起移动，当一个地图被平移时，另一个地图也移动以保持相同的中心点。较小的地图在中心有一个Xhair，在平移后返回到中心，较大的地图有多个标记。

我正在尝试将代码升级到API V3，但V3地图不会相互移动，而较小的地图Xhair无法正常运行。有人可以告诉我在API V2到API V3的脚本升级中我缺少什么？

V2代码：

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

if (GBrowserIsCompatible()) {

  function createMarker(point) {
    map.addOverlay(new GMarker(point));
  }

  // ===== Setup The Maps =====

  // Display the main map, with some controls and set the initial location 
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(54.531283,-125.125537), 12);

  // Set up three markers on the main map

  createMarker(new GLatLng(54.207882,-125.661621));
  createMarker(new GLatLng(49.214790,-124.054399));
  createMarker(new GLatLng(49.053632,-122.352859));

  // create the crosshair icon, which will indicate where we are on the minimap
  // Lets not bother with a shadow
  var Icon = new GIcon();
  Icon.image = "xhair.png";
  Icon.iconSize = new GSize(21, 21);
  Icon.shadowSize = new GSize(0,0);
  Icon.iconAnchor = new GPoint(11, 11);
  Icon.infoWindowAnchor = new GPoint(11, 11);
  Icon.infoShadowAnchor = new GPoint(11, 11);

  // Create the minimap
  var minimap = new GMap2(document.getElementById("minimap"));
  minimap.setCenter(new GLatLng(54.531283,-125.125537), 7);

  // Add the crosshair marker at the centre of the minimap and keep a reference to it

  var xhair = new GMarker(minimap.getCenter(), Icon);            
  minimap.addOverlay(xhair);


  // ====== Handle the Map movements ======

  // Variables that log whether we are currently causing the maps to be moved

  var map_moving = 0;
  var minimap_moving = 0;

  // This function handles what happens when the main map moves
  // If we arent moving it (i.e. if the user is moving it) move the minimap to match
  // and reposition the crosshair back to the centre
  function Move(){
    minimap_moving = true;
if (map_moving == false) {
  minimap.setCenter(map.getCenter());
  xhair.setPoint(map.getCenter());
  xhair.redraw(true);
}
minimap_moving = false;
  }
  // This function handles what happens when the mini map moves
  // If we arent moving it (i.e. if the user is moving it) move the main map to match
  // and reposition the crosshair back to the centre
  function MMove(){
    map_moving = true;
if (minimap_moving == false) {
  map.setCenter(minimap.getCenter());
  xhair.setPoint(minimap.getCenter());
  xhair.redraw(true);
}
map_moving = false;
  }

  // Listen for when the user moves either map
  GEvent.addListener(map, 'move', Move);
  GEvent.addListener(minimap, 'moveend', MMove);
}

// display a warning if the browser was not compatible
else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}

非工作版代码：

<script type="text/javascript">

   function createMarker(point) {
    map.addOverlay(new google.maps.Marker(point));
  }     

  // ===== Setup The Maps =====

  // Display the main map, with some controls and set the initial location function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map'), {
      center: new google.maps.LatLng(54.531283,-125.125537),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

 // Set up three markers on the main map

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(54.207882,-125.661621),
        map: map
  });
   var marker = new google.maps.Marker({
        position: new google.maps.LatLng(49.214790,-124.054399),
        map: map
  });
  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(49.053632,-122.352859),
        map: map
  });

  // create the crosshair icon, which will indicate where we are on the minimap
  // Lets not bother with a shadow
   var Icon = new google.maps.MarkerImage();
  Icon.image = "xhair.png";
  Icon.iconSize = new google.maps.Size(21, 21);
  Icon.shadowSize = new google.maps.Size(0,0);
  Icon.iconAnchor = new google.maps.Point(11, 11);
  Icon.infoWindowAnchor = new google.maps.Point(11, 11);
  Icon.infoShadowAnchor = new google.maps.Point(11, 11);

  // Create the minimap  
  var minimap = new google.maps.Map(
    document.getElementById('minimap'), {
      center: new google.maps.LatLng(54.531283,-125.125537),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });      

  // Add the crosshair marker at the centre of the minimap and keep a reference to it

  var xhair = new google.maps.Marker(minimap.getCenter(), Icon);

  minimap.addOverlay(xhair);      

  // ====== Handle the Map movements ======

  // Variables that log whether we are currently causing the maps to be moved

  var map_moving = 0;
  var minimap_moving = 0;

  // This function handles what happens when the main map moves
  // If we arent moving it (i.e. if the user is moving it) move the minimap to match
  // and reposition the crosshair back to the centre 
  function Move(){
    minimap_moving = true;
if (map_moving == false) {
  minimap.setCenter(map.getCenter());
  xhair.setPoint(map.getCenter());
  xhair.redraw(true);
}
minimap_moving = false; 
  }   
  // This function handles what happens when the mini map moves
  // If we arent moving it (i.e. if the user is moving it) move the main map to match
  // and reposition the crosshair back to the centre 
  function MMove(){
    map_moving = true;
if (minimap_moving == false) {
  map.setCenter(minimap.getCenter());
  xhair.setPoint(minimap.getCenter());
  xhair.redraw(true);
}
map_moving = false;
  }

  // Listen for when the user moves either map      
     google.maps.event.addListener(map, 'move', Move);
  google.maps.event.addListener(minimap, 'moveend', MMove);

// google.maps.event.addDomListener(window, 'load', initialize);
 google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

升级指南似乎没有关于事件的信息，一些过时的事件似乎没有在过时的代码中列出。 V2事件：V3中显然不支持“move”和“moveend”，但有类似（但不相同）的V3事件; dragstart，drag，dragend和center_changed。由于拖动事件与我正在使用的其他选择按钮不兼容：我使用了center_changed，它就像我的应用程序的魅力一样。

我探索了中心十字准线的一些选项，但是当地图被淘汰时，它们似乎有死点或跳跃，所以我淘汰了javascript解决方案并使用了Drew Noakes的简单解决方案。

这就是我想出的修复非工作V3代码的方法，可能会帮助那些人。

V3代码：

<script type="text/javascript">  
  // ===== Setup The Maps =====   
  // Display the main map and set the initial location
  var map = new google.maps.Map(
    document.getElementById('map'), {
      center: new google.maps.LatLng(54.531283,-125.125537),
      zoom: 12,
      zoomControl: false,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

 // Set up the three markers on the main map 
  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(54.207882,-125.661621),
        map: map
  });
   var marker = new google.maps.Marker({
        position: new google.maps.LatLng(49.214790,-124.054399),
        map: map
  });
  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(49.053632,-122.352859),
        map: map
  });     

  // Create the minimap  
   var minimap = new google.maps.Map(
    document.getElementById('minimap'), {
      center: new google.maps.LatLng(54.531283,-125.125537),
      zoom: 7,
      zoomControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });         
  // Add the crosshair marker at the centre of the minimap using html and CSS 

  // ====== Handle the Map movements ======      
  // Variables that log whether we are currently causing the maps to be moved    
  var map_moving = 0;
  var minimap_moving = 0;

  // This function handles what happens when the main map moves
  // If we arent moving it (i.e. if the user is moving it) move the minimap to match
   google.maps.event.addListener(map, 'center_changed', function(){
    minimap_moving = true;
if (map_moving == false) {
  minimap.setCenter(map.getCenter());     
}
minimap_moving = false; 
  })      
  // This function handles what happens when the mini map moves
  // If we arent moving it (i.e. if the user is moving it) move the main map to match
   google.maps.event.addListener(minimap, 'center_changed', function(){
    map_moving = true;
if (minimap_moving == false) {
  map.setCenter(minimap.getCenter());     
}
map_moving = false;
  })  

// google.maps.event.addDomListener(window, 'load', initialize);
 google.maps.event.addDomListener(window, 'load', initialize);    
</script>    

// HTML：

      <div id="map" style="width:627px; height: 627px"></div>
      <div id="container">
        <div id="minimap" style="width:370px; height:370px;"></div> 
        <div id="xhair"><img src="../images/xhair.png" width="20" height="20" /></div>
      </div>

// CSS：

#container { position:relative; }
#map { height:100%; width:100%; }
#xhair {
position:absolute;
left:47%;
top:47%;    
}