Question

我是js的新手，对Knockout知之甚少。我尝试了一些教程，但它仍然没有意义。无论如何，我想知道如何使用Knockout获得与下面的HTML相同的结果。

＆＃13;

<!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>

＆＃13;

我已经查看了该网站上有关该主题的多篇帖子，但我无法得到任何适合我的答案。

Answer 1

我会创建一个绑定处理程序，它完成了对外部库和模板操作的所有引用。

/**
 * 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密钥。

如何使用Knockout js和html显示Google地图

1 个答案: