0

我想在谷歌地图中移动多个标记，我成功地找到并遵循这个例子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));
  }

谁能明白为什么这不是我想要的？

谢谢

4

1 回答 1

0

尝试以下方法，这对我来说非常有用。此示例有四个映射，如果您有更多映射，您可能希望在 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();
于 2013-04-20T00:24:51.053 回答