Question

我有一个场景，我必须在一个JSP页面上放置多个地图。而且当然我必须分别对他们的标记和多边形进行处理。

我的想法是制作一张地图ID为hashmap的地图。

var mapInfo = {mapkey:'',map:''};

我将map对象放在mapInfo.map中，mapkey将是一个字符串ID。

但我无法在相应的地图上放置标记。如果我从哈希中删除获取地图对象的逻辑。它工作正常。

我需要一个指针。从哈希获取地图对象是有道理的。我不想要一个全局地图对象。我希望它来自数组或哈希。这就是我的想法。

以下是我的初始化和放置标记代码：

var geocoder;
var mapHash = [];
 var bound = new google.maps.LatLngBounds();

function initMap(map_container_div) {
 geocoder = new google.maps.Geocoder();

 var latlng = new google.maps.LatLng(38.5111, -96.8005);
 var myOptions = {
    zoom:4, 
    center:latlng, 
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
};

var map = new google.maps.Map(document.getElementById(map_container_div), myOptions);

if (!getMap(map_container_div)){
    var mapInfo = {mapkey:'',map:''};
    mapInfo.map = map;
    mapInfo.mapKey = map_container_div;
    mapHash.push(mapInfo);
  }
  }

     function palceMarker(myAddress, mapId){
   map = getMap(mapId);
   //alert(myAddress + mapId + map)     
              geocoder.geocode({'address':myAddress}, function (results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
              var marker = new google.maps.Marker({
                map:map, 
                position:results[0].geometry.location,
                title: results[0].formatted_address
            });
        bound.extend(results[0].geometry.location);
        map.fitBounds(bound);
        // alert(marker); I got an object here

    }
});
 } 

      function getMap(mapKey){

for (var i = 0 ; i < mapHash.length ; i++){     
    if (mapHash[i].mapKey == mapKey){           
        return mapHash[i].map;
    }
}
return false;
  }

Answer 1

您的代码工作正常，您应该能够以您计划的方式哈希地图对象。无法正常工作的是您处理地址地理编码的方式。由于每次启动地理编码请求时只有一个地理编码器对象实例，因此地图引用将仅包含页面上的最后一个地图。因此，您有两个选择 - 在您进行另一个地理编码请求之前，构建一个计时器来检查地理编码器（您的placeMarker函数）是否已完成。或者您保留一组地理编码器对象（如地图）..

这是一个例子

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var mapHash = [];
    var bound = new google.maps.LatLngBounds();
    finishedCoding = false;
    function initMap(map_container_div) {

        var latlng = new google.maps.LatLng(38.5111, -96.8005);
        var myOptions = {
            zoom:4,
            center:latlng,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            streetViewControl: false
        };

        var map = new google.maps.Map(document.getElementById(map_container_div), myOptions);

        if (!getMap(map_container_div)) {
            var mapInfo = {
                mapkey:'',
                map:'',
                geocoder : new google.maps.Geocoder()
            };
            mapInfo.map = map;
            mapInfo.geocoder = new google.maps.Geocoder();
            mapInfo.mapKey = map_container_div;
            mapHash.push(mapInfo);
        }
    }

    function palceMarker(myAddress, mapId) {
            mapIndex = getMap(mapId)
        //alert(myAddress + mapId + map)
        mapHash[mapIndex].geocoder.geocode({
            'address':myAddress
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                mapIndex = getMap(mapId)
                var marker = new google.maps.Marker({
                    map:mapHash[mapIndex].map,
                    position:results[0].geometry.location,
                    title: results[0].formatted_address
                });
                bound.extend(results[0].geometry.location);
                mapHash[mapIndex].map.fitBounds(bound);

                finishedCoding = true;

            }
        });
    }

    function getMap(mapKey) {

        for (var i = 0 ; i < mapHash.length ; i++) {
            if (mapHash[i].mapKey == mapKey) {
                return i;
            }
        }
        return false;
    }

    function init() {
        initMap("map1")
        initMap("map2")

        palceMarker("1/86-100 Market St, Sydney New South Wales 2000", "map1")
        palceMarker("120 Market St, Sydney New South Wales 2000", "map2")
    }
</script>
<body onload="init()">
    <div id="map1" style="width: 400px; height: 200px;">
    </div>
    <br>
    <br>
    <div id="map2" style="width: 400px; height: 200px;">
    </div>
</body>

一页上有多个Google地图 - Map API 3

1 个答案: