使用 ko.observableArray 将项目列表与谷歌地图标记链接答案

【问题标题】：Link item list with google map marker using ko.observableArray使用 ko.observableArray 将项目列表与谷歌地图标记链接
【发布时间】：2018-07-12 09:53:42
【问题描述】：

我正在处理一个udacity 项目，我试图将列表中的项目与谷歌地图标记链接起来时遇到了困难。

问题是，在我单击列表中的任何项目后，都会弹出相同的标记。我无法分辨列表中点击的项目

“嘿，当你被点击时，你应该让标记 x 弹出”。

表示我想将点击事件绑定到项目。

我尝试了很多解决方案，但最终陷入困境和困惑（observableArrays 快让我发疯了）。

参见下面的演示或Fiddle

var initialLocations = [

  {
    id: 309,
    name: "Murray St & West St",
    latitude: 40.7149787,
    longitude: -74.013012,
    address: "Murray St & West St",
    borough: "Tribeca",
  }, {
    id: 383,
    name: "Greenwich Ave & Charles St",
    latitude: 40.735238,
    longitude: -74.000271,
    address: "Greenwich Ave & Charles St",
    borough: "Greenwich Village",
  }
];

var Location = function(data) {
  this.name = ko.observable(data.name);
  this.borough = ko.observable(data.borough);
  this.address = ko.observable(data.address);
  this.latitude = ko.observable(data.latitude);
  this.longitude = ko.observable(data.longitude);

};

var ViewModel = function() {

  var self = this;

  this.locationList = ko.observableArray([]);

  initialLocations.forEach(function(locationItem) {
    self.locationList.push(new Location(locationItem));
  });

  this.currentLocation = ko.observable(this.locationList()[0]);

  alert('Current location: ' + self.currentLocation);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(40.65, -73.8),
    mapTypeId: google.maps.MapTypeId.hybrid
  });

  this.changeLocation = function(location) {

    self.currentLocation(location);

    var marker;

    this.marker = new google.maps.Marker({
      position: {
        lat: initialLocations[1].latitude,
        lng: initialLocations[1].longitude
      },
      name: name,
      map: map,
      animation: google.maps.Animation.DROP


    });

    google.maps.event.trigger(new marker, 'click');

  };

  function clicker() {

    var infowindow = new google.maps.InfoWindow();

    var marker;

    for (i = 0; i < 2; i++) {


      marker = new google.maps.Marker({
        position: new google.maps.LatLng(initialLocations[i].latitude, initialLocations[i].longitude),
        map: map,


      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {

          infowindow.setContent('<div>' + initialLocations[i].id + initialLocations[i].name + '</br>' + initialLocations[i].borough + '</div>');
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }

  clicker();

};


ko.applyBindings(new ViewModel());

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Location Clicker</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBm2EzmXIrVzgPH9uZxZzaGlKlF3IgUaYU">
    type = "text/javascript" >
  </script>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>
  <ul id="location-list" data-bind="foreach: locationList">
    <li data-bind="click: $root.changeLocation.bind($index()), text: name"></li>
  </ul>
  <div data-bind="with: currentLocation" id="location">

    <h2 data-bind="text: name"></h2>
    <h2 data-bind="text: borough"></h2>
    <h2 data-bind="text: address"></h2>

    <ul data-bind="foreach: borough">
    </ul>

  </div>

  <div id="map" style="width: 2000px; height: 1000px;"></div>

  <script src="http://knockoutjs.com/downloads/knockout-3.5.0beta.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript google-maps knockout.js maps marker

【解决方案1】：

其实你已经很接近了。您的问题是您在标记中硬编码纬度和经度。

this.marker = new google.maps.Marker({
  position: {
    lat: initialLocations[1].latitude,
    lng: initialLocations[1].longitude
  },
  name: name,
  map: map,
  animation: google.maps.Animation.DROP
});

如果你从你的函数中的位置元素中获取它，你会没事的。

this.marker = new google.maps.Marker({
  position: {
    lat: location.latitude(),
    lng: location.longitude()
  },
  name: name,
  map: map,
  animation: google.maps.Animation.DROP
});

Working fiddle here.

也许你毕竟没那么疯狂。 ;)

【讨论】：