在一个页面上的多个Google地图 - 地图API 3

我有一个scenerio，我必须在一个JSP页面上放置多个地图。而且，我不得不单独处理他们的标记和多边形。在一个页面上的多个Google地图 - 地图API 3

我在想什么策略是制作地图的地图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; 
    }

来源

2011-06-29 Tahir Akram

你的代码工作正常，你应该能够散列你打算做的方式映射对象。什么是不正确的工作是你处理地址的地理编码的方式。由于每次启动地理编码请求时都只有一个地理编码器对象实例，因此地图引用将仅包含页面上的最后一个地图。所以你有两个选择 - 要么建立一个计时器，检查地理编码器（你的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>

来源

2011-07-04 03:28:48 Michal

我你的答案对我来说是非常有帮助的....你能能帮助我如何创建该div动态...请 –

在一个页面上的多个Google地图 - 地图API 3

回答

相关问题