使用KnockoutJS添加谷歌地圖

我在我的html文件中有以下部分。使用KnockoutJS添加谷歌地圖

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDwsTgxJyu7KG7BPM3q54mgjSHl1imLnCM&sensor=false"> 
</script> 
<script type="text/javascript"> 
    $(function() { 
     require(["Work/AddCiniViewModel"], function (model) { 
      addCiniViewModel = new model(); 
      addCiniViewModel.createMap(); 
      ko.applyBindings(addCiniViewModel, document.getElementById("AddCiniForm")); 
      } 
     });

我在我的ViewModel文件中有以下部分。

self.map; 
     self.Lng = ko.observable(12.24); 
     self.Lat = ko.observable(24.54); 

     self.createMap = function() { 
      var elevator; 
      var myOptions = { 
       zoom: 3, 
       center: new google.maps.LatLng(12.24, 24.54), 
       mapTypeId: 'terrain' 
      }; 
      map = new google.maps.Map($('#map')[0], myOptions); 
     } 


     ko.bindingHandlers.map = { 
      init: function (element, valueAccessor, allBindingsAccessor, addCiniViewModel) { 


       var position = new google.maps.LatLng(allBindingsAccessor().latitude(), 
        allBindingsAccessor().longitude()); 

       var marker = new google.maps.Marker({ 
        map: allBindingsAccessor().map, 
        position: position, 
        title: name 
       }); 

       self._mapMarker = marker; 
      }, 
      update: function (element, valueAccessor, allBindingsAccessor, addCiniViewModel) { 
       var latlng = new google.maps.LatLng(allBindingsAccessor().latitude(), allBindingsAccessor().longitude()); 
       self._mapMarker.setPosition(latlng); 

      } 
     };

我想在下面的div中看到谷歌地圖及其lat值。

<div id="map"></div> 
      <input data-bind="value: Lat" /> 
      <input data-bind="value: Lng" /> 
      <div data-bind=" style: style:{width:'300px',height:'300px'}, 
       latitude: addCiniViewModel.Lat, longitude:addCiniViewModel.Lng, map:map"> 
      </div>

當我運行此代碼。我在螢火蟲中得到這個訊息。 google.maps.LatLng不是構造函數

有什麼不對？我怎麼解決這個問題？

來源

2013-12-21 user3008355

當您的代碼執行繼續時，Google Maps API JavaScript異步加載。您的代碼在可用之前會使用Maps API。

等待地圖API你可以用你的ko.applyBindings調用一個jQuery onload事件處理程序

$(window).load(function() { 
    ko.applyBindings(addCiniViewModel, document.getElementById("AddCiniForm")); 
});

這裏面是如何初始化使用代碼之前等待的地圖API從谷歌另一個例子它：https://developers.google.com/maps/documentation/javascript/tutorial

來源

2013-12-21 15:37:49

使用KnockoutJS添加谷歌地圖

回答

相關問題