在一个页面上显示多个Google地图 - 地图API 3 [英] Multiple Google maps on one page - Map API 3

问题描述

我有一个scenerio，我必须在一个JSP页面上放置多个地图。

I have a scenerio where I have to place multiple maps on one JSP page. And offcourse I have to handel their markers and polygons seprately.

我在想什么策略是做一个 hashmap c>以地图ID作为关键字的地图。

What strategy I am thinking is to make a hashmap of maps with a map id as their key.

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

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

I will put map object in mapInfo.map and mapkey will be a string ID.

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

But I am unable to place markers on the respective map. If I remove the logic of getting map object from hash. It works fine.

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

I need a pointer on it. Getting a map object from hash is making sense. I dont want a global map object. I want it from array or hash. This is what I am thinking.

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

Following is my initialization and placing marker code:

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;
  }

推荐答案

你应该能够以你打算做的方式散列地图对象。什么是不正确的工作是你处理地址的地理编码的方式。由于每次启动地理编码请求时都只有一个地理编码器对象实例，因此地图引用将仅包含页面上的最后一个地图。
所以你有两个选择 - 要么建立一个计时器，在你做出另一个地理编码请求之前检查geocoder（你的placeMarker函数）是否完成。或者你保存一个geocoder对象数组（如你的地图）。

You code works correctly, and you should be able to hash map objects in the way you are planning to do. What is not going to work correctly is the way you are handling geocoding of the address. As you only have one instance of geocoder object everytime you launch a gecoding request the map reference will only contain the last map on page. So you have two choices - either build a timer which checks if geocoder (your placeMarker function) finished before you make another geocoding request. Or you keep an array of geocoder objects (like your maps)..

这里是一个例子

<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地图 - 地图API 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！