2012-08-07 33 views
0

我在的Joomla 2.5工作,我必須創造一個谷歌地圖一個模塊,並使用谷歌地圖API V2Joomla2.5 - 不工作的GClientGeocoder在谷歌地圖V2

,我使用geocoder = new GClientGeocoder();但它現在正

輸出圖像: - enter image description here

我的HTML <div>標籤

<div id="map_canvas" style="width: 800px; height:800px;"></div> 

我的腳本

<script> 

    //<![CDATA[ 
    var map = null; 
    var geocoder = null; 

    function initialize() { 

     if (GBrowserIsCompatible()) { 

     //calls map to appear inside <div> with id, "map_canvas" 
     map = new GMap2(document.getElementById("map_canvas")); 

     //adds zoom and arrow controls to map 


     geocoder = new GClientGeocoder(); 

     map.setMapType(G_SATELLITE_MAP); 

     var allAddress = "Dubai~Abu Dhabi"; 
     var addresses = new Array(); 
     addresses = allAddress.split("~"); 



     var curIndex = 0; 

     function showAddress() { 

      var _cur = addresses[curIndex]; 


      geocoder.getLatLng(
      _cur, 
      function(point) { 
      alert(_cur); 
       if (!point) { 
      alert(_cur + " not found"); 
       } else { 
      alert(_cur+":"+point); 


       } 
       //do next after done 
       curIndex++; 
       if(curIndex<addresses.length) 
      showAddress(); 
      } 
     ); 
     } 

     showAddress(); 
     } 
} 
//]]> 
</script> 

回答

1

請參見下面的代碼並嘗試它。

我使用PHP靜態數組,你可以連接你的數據庫並根據你的需求創建數組。看下面的數組。

<?php $item = array('jaipur, rajasthan,india', 'udaipur, rajasthan,india'); ?> 

下面我的代碼看一看。

<html> 
    <head> 
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyDwFjOazEAe1MI7nHV6vUwkWytOp8LH2Zk" type="text/javascript"></script> 
    </head> 
    <body onload="initialize();"> 
    <?php $item = array('jaipur, rajasthan,india', 'udaipur, rajasthan,india'); ?> 
    <script> 
    var map = null; 
    var geocoder = null; 

    function initialize() { 
      if (GBrowserIsCompatible()) { 


        map = new GMap2(document.getElementById("map_canvas")); 
        var addresses = ["<?php echo implode ('","', $item); ?>"] 


        var geocoder = new GClientGeocoder(); 
        //var addresses = ["A II Z, Ibn Battuta Mall, Sheikh Zayed Road, 5th Interchange, Jebel Ali Village, Dubai","A. Testoni,Dubai Festival City Mall, Ground Floor, Dubai", "Abdulla Hussain Khunji, The Dubai Mall,Downtown, Abu Dhabi"]; 
        var curIndex = 0; 

        function showAddress() { 
         var _cur = addresses[curIndex]; 
         geocoder.getLatLng(
         _cur, 
         function(point) { 
          if (!point) { 
          //alert(_cur + " not found"); 
          //map.setCenter(new GLatLng(0, 0), 6); 
          //map.setUIToDefault(); 
          } else { 
          //console.log(_cur+":"+point); 
          //alert(_cur); 
            var cafeIcon = new GIcon(G_DEFAULT_ICON); 

            // Set up our GMarkerOptions object 
            markerOptions = { icon:cafeIcon }; 

            map.setCenter(point, 6); 
            var marker = new GMarker(point, markerOptions); 
            map.addOverlay(marker); 

            var sales = new Array(); 
            sales = _cur.split("|"); 


            //Add click event on push pin to open info window on click of the icon 
            GEvent.addListener(marker, "click", function() { 
              marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address <br /><span class='para1' style='font-weight:normal;'>" + sales[1] + "</span></p>"); 
            }); 
            //Provides map,satellite,hybrid and terrain views in the map along with zoom control 


            map.setUIToDefault(); 
          } 
          //do next after done 

          curIndex++; 

          if(curIndex<addresses.length) 
          showAddress(); 
         } 
        ); 
        } 
        showAddress(); 
     } 
    } 
    </script> 
    <div id="map_canvas" style="width:100%; height:750px;"></div> 
    </body> 
</html> 
+1

這是Gmap的基礎。你可以在joomla 2.5中輕鬆轉換 – 2012-08-31 05:03:47