Question

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

移动多个标记谷歌地图？

1 个答案: