Question

我正在开展一个udacity项目我试图将列表中的项目与谷歌地图标记相关联。

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

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

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

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

见下面的演示或Fiddle

＆＃13;

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());

＆＃13;

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

＆＃13;

Answer 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
});

如果你从函数中的location元素得到它，你就可以了。

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.

毕竟也许你不是那么疯狂。 ;）

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

1 个答案: