我无法点击我的标记。我知道如何做到这一点，但它不会起作用。下面是我的javascript。我尝试将我认为我拥有的部分放入可点击标记。它主要在View Model中的clickedOn和findRestaurant函数上。如果您需要更多信息，请告诉我。
HTML：
<!DOCTYPE html>
<html>
<head>
<title> My Favorite Restaurants</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap CDN: www.getbootstrap.com -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- knockout and app js file -->
<script src="js/knockout-3.4.2.js"></script>
<script src="js/app.js"></script>
<!-- google api -->
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4XqDc-jUpHmSW91uuUHe9TDxXq2GHGYQ&v=3&callback=initMap" onerror="googleMapError()"></script>
<!-- css files -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- container and row for bootstrap-->
<div class = "container row">
<!-- bootstrap column for box-->
<div class = "options-box col-lg-4 no-float">
<header>
<h1>Restaurants in West LA </h1>
<!-- search button-->
<form class="form-inline" id="form-search" data-bind="submit: search">
<input type="text" class="form-control" data-bind="value: itemQuery" id="query-input" placeholder="Which Restaurant?" autofocus>
<button type="submit" id="submit-button" class="form-control">Search</button>
</form>
<p id="queryStatus" class = "num-of-restaurants" data-bind="text: getResults"></p>
</header>
<!-- adding scroller -->
<div id="scroller">
<!-- list of restaurants -->
<ul class="list-group" data-bind="foreach: {data: restaurantsWanted, as: 'restaurant'}" id="list">
<li data-bind="click: $root.clickedOn" class="list-group-item">
<span data-bind="text: restaurant.restaurantName" data-toggle="dropdown"></span>
</li>
</ul>
</div>
<div class="attribution column-md-12"> FourSquare API Source </div>
</div>
<!-- map -->
<div id = "map" class = "col-lg-8 no-float"></div>
</div>
</body>
</html>
JS：
var map;
// Initializing MAP
function initMap(){
var mapAttribute = [
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
}
];
// google map settings
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(34.0101,-118.4962),
zoom: 15,
mapTypeControl: false,
styles: mapAttribute,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
ko.applyBindings(new MapAppViewModel());
}
// data for functions
var data;
var notSelectedIcon;
var selectedIcon;
// Functions for Foursquare
var FSData = function (restaurant, map){
var self = this;
self.restaurantName = ko.observable(restaurant.name); self.location = restaurant.location; self.latitude = self.location.lat; self.longitude = self.location.lng;
// Foursquare Lat and Lng
self.MapsLocation = ko.computed(function (){
if (self.latitude === 0 || self.longitude === 0) {
return null;
} else {
return new google.maps.LatLng(self.latitude, self.longitude);
}
});
self.pinmark = (function (restaurant){
var pinmark;
if (restaurant.MapsLocation()){
pinmark = new google.maps.Marker({ position: restaurant.MapsLocation(), map: map, icon: notSelectedIcon });
}
return pinmark;
})(self);
self.formattedAddress = ko.observable(self.location.formattedAddress); self.formattedPhone = ko.observable(restaurant.contact.formattedPhone);
self.id = ko.observable(restaurant.id); self.url = ko.observable(restaurant.url);
self.WindowInfo = function () {
return '<div class="selectedWindow">' +
'<a href="' + (self.url()===undefined?'/':self.url()) + '">' +
'<span class="window-header">' +
'<h4>' + self.restaurantName() + '</h4>' +
'</span>' +'</a>' +
'<h6>' + self.formattedAddress() + '<br>' + self.formattedPhone() + '</h6>' + '</div>';
};
};
// View Model for app
var MapAppViewModel = function (){
var self = this;
notSelectedIcon = markericon('yellow-dot');
selectedIcon = markericon('red-pushpin');
function init() {
findRestaurants();
}
var dataInfo = new google.maps.InfoWindow();
google.maps.event.addDomListener(window, 'load', init);
self.restaurantsFound = ko.observableArray([]);
self.search = function (){
};
self.itemQuery = ko.observable('');
self.getResults = ko.observable('');
self.restaurantsWanted = ko.computed(function (){
self.restaurantsFound().forEach(function (restaurant){restaurant.pinmark.setMap(null); });
var restaurantResults = ko.utils.arrayFilter(self.restaurantsFound(), function (restaurant) {
return restaurant.restaurantName().toLowerCase().includes(self.itemQuery().toLowerCase());
});
restaurantResults.forEach(function (restaurant) { restaurant.pinmark.setMap(map); });
if (restaurantResults.length > 0) {
self.getResults("Found " + restaurantResults.length + " Restaurants");
return restaurantResults;
} else {
self.getResults("Unable to find restaurants");
return restaurantResults;
}
});
self.getResults("Looking for Restaurants...");
**self.clickedOn = function (restaurant){
restaurant.pinmark.setAnimation(google.maps.Animation.BOUNCE);
restaurant.pinmark.setIcon(selectedIcon);
dataInfo.setContent(restaurant.WindowInfo());
dataInfo.open(map, restaurant.pinmark);
map.panTo(restaurant.pinmark.position);
self.restaurantsFound().forEach(function (restaurantNotSelected){
if (restaurant != restaurantNotSelected) {
restaurantNotSelected.pinmark.setAnimation(null);
restaurantNotSelected.pinmark.setIcon(notSelectedIcon);
}
});
};**
// Find Restaurants in Santa Monica
function findRestaurants(){
var fourSquareUrl = 'https://api.foursquare.com/v2/venues/search';
$.ajax({
async: true,
url: fourSquareUrl,
data: 'client_id='+clientId+'&client_secret='+clientSecret+'&v=20170901%20&ll=34.024212,-118.496475&venuePhotos=1&%20&query=restaurant&limit=6&radius=1000',
dataType: 'json'
}).done(function (callback){
self.restaurantsFound().forEach(
**function (restaurant) { if (restaurant.MapsLocation()) {
google.maps.event.addListener(restaurant.pinmark, 'click', function () {self.clickedOn(restaurant);});
}});**
infoBack = callback.response.venues;
infoBack.forEach(function (restaurant) {
fsdata = new FSData(restaurant, map); self.restaurantsFound.push(fsdata);
}
);
}).fail(
// if query cannot be loaded
function (callback, status, error){
$('#queryStatus').text('Cannot Load Restaurants...');
});
}
}