ノックアウトjsとhtmlを使ってGoogleマップを表示するには

私はjsを使い慣れていて、Knockoutについてはほとんど知りません。私はいくつかのチュートリアルを試みましたが、それはまだ意味をなさない。とにかく、Knockoutを使って、以下のHTMLと同じ結果を得る方法を知りたい。ノックアウトjsとhtmlを使ってGoogleマップを表示するには

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
#map { 
 
     width: 100%; 
 
     height: 800px; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h3>Map</h3> 
 
    <div id="map"></div> 
 
    <script type='text/javascript' src='knockout-3.3.0.js'></script> 
 
    <script> 
 
     function initMap() { 
 
     var mapDiv = document.getElementById('map'); 
 
     var map = new google.maps.Map(mapDiv, { 
 
      center: {lat: 39.962386, lng: -82.999563}, 
 
      zoom: 14 
 
     }); 
 
     var marker1 = new google.maps.Marker({ 
 
      position: {lat: 39.969819, lng: -83.01012}, 
 
      animation: google.maps.Animation.BOUNCE, 
 
      map: map, 
 
      title: 'EXPRESS LIVE!' 
 
     }); 
 
      var marker2 = new google.maps.Marker({ 
 
      position: {lat: 39.969424, lng: -83.005915}, 
 
      animation: google.maps.Animation.BOUNCE, 
 
      map: map, 
 
      title: 'Nationwide Arena' 
 
     }); 
 
      var marker3 = new google.maps.Marker({ 
 
      position: {lat: 39.964425, lng: -82.987804}, 
 
      animation: google.maps.Animation.BOUNCE, 
 
      map: map, 
 
      title: 'Columbus Museum of Art' 
 
     }); 
 
      var marker4 = new google.maps.Marker({ 
 
      position: {lat: 39.959688, lng: -83.007202}, 
 
      animation: google.maps.Animation.BOUNCE, 
 
      map: map, 
 
      title: 'COSI' 
 
     }); 
 
      var marker5 = new google.maps.Marker({ 
 
      position: {lat: 39.969161, lng: -82.987289}, 
 
      animation: google.maps.Animation.BOUNCE, 
 
      map: map, 
 
      title: 'Columbus State College' 
 
     }); 
 
      var marker6 = new google.maps.Marker({ 
 
      position: {lat: 39.946266, lng: -82.991023}, 
 
      animation: google.maps.Animation.BOUNCE, 
 
      map: map, 
 
      title: "Schmidt's Sausage Haus und Restaurant" 
 
     }); 
 
     } 
 
    </script> 
 
    <script async defer 
 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzDEepTI6qMIoZ3OGMe03ZWpmrIakZCwc&callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

私は、トピックに関する本サイト上の複数の投稿を見てきましたが、私は私のために働くことの答えのいずれかを取得することはできません。

出典

2016-09-09 user1560400

正確には何ですか？コードスニペットはあなたのマップを示しています... –

私はノックアウトjsをHTMLファイルの代わりに別のjsファイルで使っています。私はまだ私のために働く解決策を細かくする必要があります。 – user1560400

ここで達成しようとしていることの論理は何ですか？マーカーの位置が変わるのでしょうか？彼らはノックアウト観察可能である必要がありますか？このマップを複数のページで再利用する必要がありますか？あなたが望む最終的な結果を説明するならば、私たちはもっと助けることができます！ –

私は、外部ライブラリとテンプレート操作を参照するすべてのバインディングハンドラを作成します。

/** 
* Decorates a div with a map and adds marker points 
*/ 

ko.bindingHandlers.googleMap = { 

    init(mapDiv, valueAccessor) { 
     let bindingData = ko.unwrap(valueAccessor()) || {}, 
     map = new google.maps.Map(mapDiv, { 
      center: { 
       lat: bindingData.centerX, 
       lng: bindingData.centerY 
      }, 
      zoom: bindingData.zoom 
     }), 
     markers = _.map(bindingData.markers,function (data) { 
      return new google.maps.Marker(data); 
     }); 

     // do some more stuff or hook into markers 
     // you might want to subscribe to the markers collection 
     // if you make it an observable array 
    } 

    };

テンプレートでそれを参照するようなものになるだろう：

<html> 
    <body> 
    <div class='map-div' data-bind="googleMap:googleMapData"></div> 
    </body> 
</html>

その後のViewModelに何か指定：

var ViewModel = function() { 
    this.googleMapData = ko.observable({ 
     centerX: 39.962386, 
     centerY: -82.999563, 
     zoom: 14, 
     markers: [{ 
     position: {lat: 39.964425, lng: -82.987804}, 
     animation: google.maps.Animation.BOUNCE, 
     map: map, 
     title: 'Columbus Museum of Art' 
     }, 
     ... 
     ] 
    }); 
} 

ko.applyBindings(new ViewModel());

Added a Fiddle to helpを - ちょうどマップAPIのAPIキーを置き換えますライブラリが含まれています。

出典

2016-09-09 19:07:39

大丈夫ですが、地図のキーはどうしたらいいですか？新しい設定に合わせて変更する必要がありますか？ – user1560400

また、ノックアウトファイルとhtmlの関係についてもう少し詳しく知りたいと思っていました。それは私の実装が実行されるように見えることはできませんし、私のコンソールはエラーが発生しません。私は私のhtmlとjsファイルを正しくリンクしているかどうかわかりません。 – user1560400

ええええええええええええええええええええと申し上げます - ノックアウトでもう少し経験があると思ったと思います。渡されているviewModelオブジェクトを持つko.applyBindingsは、テンプレート内の任意のプロパティを受け取り、それらをviewModelのプロパティにバインドします。まず、koライブラリとバインディングハンドラの呼び出しをインクルードする必要があります。それはKOをウィンドウスコープに入れ、バインディングハンドラをKOに添付します。次に、viewModelが後に来ます。私はこれをよく説明するバイブルを作っていきます。 –

ノックアウトjsとhtmlを使ってGoogleマップを表示するには

答えて

関連する問題