Как отобразить карту Google с нокаутом js и html

Я новичок в js и очень мало знаю о нокауте. Я пробовал некоторые учебные пособия, но это все еще не имеет смысла. Во всяком случае, я хочу знать, как я получаю те же результаты, что и HTML ниже, используя Knockout.Как отобразить карту Google с нокаутом js и html

<!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 в отдельном файле js вместо файла html. Мне еще предстоит оценить решение, которое работает для меня. – 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

Да, извините, я полагаю, у вас было немного больше опыта с нокаутом. ko.applyBindings с переданным объектом viewModel принимает любые собственные свойства в шаблоне и привязывает их к свойствам в viewModel. Сначала вам нужно будет включить библиотеку ko и вызов обработчика привязки. Это добавит KO в область окна и привяжет обработчик привязки к KO. Затем появляется viewModel. Я сделаю скрипку, которая лучше иллюстрирует это. –

Как отобразить карту Google с нокаутом js и html

ответ

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