使用ko.observableArray将项目列表与Google地图标记链接
[英]Link item list with google map marker using ko.observableArray
问题描述
I am working on an udacity project I got stuck trying to link the items on the list with the google map markers. 
我正在做一个udacity项目，我试图将列表中的项目与Google地图标记链接起来而陷入困境。
The problem is that after I click in any of the items on the list, the same markers pops up. 问题是，单击列表中的任何项目后，都会弹出相同的标记。 I wasn't able to tell the clicked item on the list 我无法告诉列表中被点击的项目
“hey when you got clicked you should make marker x pop”.
Means i want to bind the click event to the item. 表示我想将click事件绑定到该项目。
I tried many solutions but ultimately got stuck and confused ( observableArrays are driving me crazy). 我尝试了许多解决方案，但最终陷入困境并感到困惑（ observableArrays我发疯）。
See below demo or Fiddle 见下面的演示或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>
1 个解决方案
解决方案1
0 2018-02-02 14:31:32
You're actually pretty close. 您实际上很接近。 Your problem is that you are hard-coding the latitude and longitude in your 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
});
If you get it from the location element in your function instead, you will be fine. 如果您从函数中的location元素获取它，则可以。
this.marker = new google.maps.Marker({
position: {
lat: location.latitude(),
lng: location.longitude()
},
name: name,
map: map,
animation: google.maps.Animation.DROP
});
Maybe you're not so crazy after all. 也许您毕竟不是那么疯狂。 ;) ;）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.