移动多个标记的谷歌地图？

Question

我想在Google地图中移动多个标记，但我成功找到并遵循了此示例http://jsfiddle.net/ThinkingStiff/Rsp22/，但该示例仅显示一个标记可以移动...我试图修改代码，但未成功。 ..这是我的代码...

function initialize() { 
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    //makeRequest is function to load data coordinat from db..... success!!
       makeRequest('get_locations.php', function(data) {

            var data = JSON.parse(data.responseText);

         for (var i=0;i<data.lenght;i++){
           //document.getElementById("koordinatnya").innerHTML = data[0]['latitude']+","+data[0]['longitude'];
           var myLatlng = new google.maps.LatLng(data[i]['latitude'], data[i]['longitude']);
           var marker = new google.maps.Marker({
                position: myLatlng,
                title:"Dari db :" + data[i]['tempat']
            });

            marker.setMap(map);
            moveMarker( map, marker, data[i]['latitude'], data[i]['longitude']);

         }

        });
  }

  function moveMarker( map, marker, lat, lng ) {    
        //delayed so you can see it move
            marker.setPosition( new google.maps.LatLng(lat,lng));
            map.panTo( new google.maps.LatLng(lat,lng));
  }

谁能看到为什么这不符合我的要求？

谢谢

Answer 1

尝试以下方法，它对我来说非常合适。 此示例有四个映射，如果有更多映射，则可能需要在for循环中填充数组。

请注意，如何将8个点全部加载到同一位置（每个地图两个），然后将A到D（每个地图一个）上/下/左/右移动

HTML：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<table>
    <tr>
        <td><div id="map0" class="map"></div></td>
        <td><div id="map1" class="map"></div></td>
    </tr>
    <tr>
        <td><div id="map2" class="map"></div></td>
        <td><div id="map3" class="map"></div></td>
    </tr>
</table>

CSS：

.map
{ 
height: 300px; 
width: 400px;
}

JAVASCRIPT：

var vans = { "H": 0, "A": 1, "B": 2, "C": 3, "D": 4, "E": 5, "F": 6, "G": 7, "H": 8  };
var Maps = new Array(); 
var markers = [];

function initialize() {
    var myLatLng = new google.maps.LatLng(53, -1);
        myOptions = {
            zoom: 13,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        Maps[0] = new google.maps.Map(document.getElementById("map0"), myOptions);
        Maps[1] = new google.maps.Map(document.getElementById("map1"), myOptions);
        Maps[2] = new google.maps.Map(document.getElementById("map2"), myOptions);
        Maps[3] = new google.maps.Map(document.getElementById("map3"), myOptions);
        addPoint(Maps[0], 53, -1, "A");
        addPoint(Maps[1], 53, -1, "B");
        addPoint(Maps[2], 53, -1, "C");
        addPoint(Maps[3], 53, -1, "D");
        addPoint(Maps[0], 53, -1, "E");
        addPoint(Maps[1], 53, -1, "F");
        addPoint(Maps[2], 53, -1, "G");
        addPoint(Maps[3], 53, -1, "H");    
        movePoint(53.5, -2, "A");
        movePoint(53, 0, "B");
        movePoint(53.5, -1, "C");
        movePoint(53, -2, "D");
}
        function movePoint(lat, lng, name) {
            var thisLatlng = new google.maps.LatLng(lat, lng);
            markers[vans[name]].setPosition(thisLatlng);
        }

        function addPoint(thismap, lat, lng, name) {            
            var thisLatlng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: thisLatlng
            });
            marker.setMap(thismap);
            markers[vans[name]] = marker;
        }
initialize();