Question

从作为对象存储在数组中的最喜欢的场所的简单列表开始，我需要在谷歌地图上显示这些场地和他们自己的标记。单击标记后，应打开其信息窗口并显示其信息。这很直接，我已经做到了。

除此之外，我还在地图右侧的列表中显示了这些场地的名称。我的麻烦是连接这两件事 - 标记和它们各自的标题在右边的列表中。例如，当我在列表视图中单击某个项目（地点名称）时，我需要该位置上的地图标记来显示其信息。

对于我的生活，我似乎无法理解如何连接这两件事。我正在使用Knockout.js来保持Javascript和html同步，你可以在地图下面看到，当我点击列表中的项目时，会显示“currentPlace”。这不会在最终的应用程序中，但它说明了我的目标。基本上我需要currentPlace来触发标记点击???

我看过的一些事情： google maps api .... showing a markers infowindow from a link outside of the map

这似乎最初起作用，但点击地图标记不会打开一个窗口......他们也在使用jQuery，我试图仅使用Knockout.js和vanilla JavaScript来实现这一点。 / p>

另外，这个： http://jsfiddle.net/RASG/X5mhL/

这说明了我正在拍摄的内容，但是通过这个例子，hrefs只是输入到html中。我试图在JavaScript中完成这项工作，只需在initialPlaces数组中添加一个新位置即可轻松添加新位置。

非常感谢任何帮助。

这是我的带有Knockout.js数据绑定的html：

<body>
<div class="row">
    <div class="col-md-8">
        <hr>
    </div>
    <div class="col-md-4" id="search-header">
        <form id="new-search">
            <input type="text" class="text-input" data-bind="value: searchEntry">
            <input type="submit" value="look for things" class="search-button" data-bind="">
        </form>
    </div>
</div>
<div class="row">
    <div class="col-md-8" id="mapContainer">
            <div class="map" id="map-canvas"></div>
    </div>
    <div class="col-md-4">
        <div id="places">
            <h2 id="list-title">FAVORITE PLACES</h2>
            <hr>
            <div id="place-list" data-bind="foreach: placeList">
                <h3 data-bind="text: $data.name, click: $parent.setPlace" id="list-item"></h3>
            </div>
        </div>
    </div>
</div>
<div id="place" data-bind="with: currentPlace">
    <h2 data-bind="text: name"></h2>
</div>

这是我的JavaScript：

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

var Place = function(data) {
var self = this;

this.name = ko.observable(data.name);
this.lat = ko.observable(data.lat);
this.long = ko.observable(data.long);

var titleString = String(data.name);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data.lat, data.long),
    title: titleString,
    map: map
});

google.maps.event.addListener(marker, 'click', function () {
    map.panTo(marker.position);
    infowindow.open(map, marker);
    infowindow.setContent(titleString);
});

markers.push(marker);

};

var markers = ko.observableArray([]);

var mapCanvas = document.getElementById('map-canvas');
var mapOptions = { center: { lat: 40.675087, lng: -73.975524},
    zoom: 12,
    disableDefaultUI: true
    };

map = new google.maps.Map(mapCanvas, mapOptions);

var initialPlaces = [
    { 
        name: 'Soda Bar',
        lat: '40.678396',
        long: '-73.968349'
    },
    {
        name: 'Brooklyn Roasting Co.',
        lat: '40.704334',
        long: '-73.986524'
    },
    {
        name: 'Prospect Park',
        lat: '40.661034',
        long: '-73.968876'
    }
];


var ViewModel = function() {
    var self = this;

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

    initialPlaces.forEach(function(placeItem){
        self.placeList.push( new Place(placeItem));
        console.log(placeItem);
    });

    this.currentPlace = ko.observable(this.placeList()[0]);

    this.setPlace = function(clickedPlace) {
        self.currentPlace(clickedPlace);
    };
    /*
     * Create a thing to hold search entry
     */
    this.searchEntry = ko.observable('Search')
};

ko.applyBindings(new ViewModel());

单击列表中的项目可使用Knockout.js和vanilla JavaScript

0 个答案: