2013-08-13 4 views
-1

Я работаю в ZK, и теперь мне нужны карты Google API. Иногда я использовал этот API в другой структуре. Я не показываю карты. Во-первых, я думал, что проблема может быть css, но это не так. Я добавил функцию инициализации (карты) к событию onLoad из окон, но у меня была такая же проблема. Я отлаживаю код в браузере с помощью консоли js, и я видел, что загрузка событий в окне недоступна, поэтому я вызвал функцию инициализировать из загрузки события из div (который содержит карты), снова консоль js показала то же самое сообщение. я использую директивуGoogle Maps API JavaScript и ZK

<div id="map_canvas" style="width: 320px; height: 480px;" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="initialize()"></div> 

Но DIV не было показано. Наконец я использовал чистый HTML элемент, используя HTML-тег ZK:

<html><![CDATA[ 
    <div id="map_canvas" onload="initialize()" style="width: 320px; height: 480px;"/> 
]]></html> 

, но результат в консоли Js снова

<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then <a href="">try again</a>.</p></div> 

Я хотел бы знать, как функция, которая показывает карты не делают этого. Я думаю, что проблема в js, но я не уверен, кто-нибудь скажет мне, есть ли проблема, вызванная js, пожалуйста?

Спасибо.

Edit:

Я использовал этот способ сделать это (спасибо Шону Коннолли: How get the zk element id from js)

<zk> 
    <script type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?key=API_KEY&amp;sensor=false"> 
</script> 

<script type="text/javascript">  
    var map; 
    function initialize() { 

     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var mapOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(zk.Widget.$(jq('$map_canvas2')).$n(), mapOptions); 
    }  
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<div id="map_canvas2" style="width: 1320px; height: 1480px;" /> 

+0

Вопрос отредактирован. –

ответ

-1

Я думаю, что вы хотите что-то вроде этого:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

var geocoder; 
var map; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
} 

function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({'address': address}, 
    function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 

      alert(results[0].geometry.location.latlng[0]); 



     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
} 
initialize(); 
</script> 

<div id="map_canvas" style="width: 320px; height: 480px;" onClick="initialize()"></div> 
+1

Большое спасибо, но этот код неправильный для ZK. –

Смежные вопросы