当谈到javascript时,我是一个初学者,我真的被我的一个项目卡住了。我有一个单独的页面,上面有某个地区的谷歌地图。我使用附近的搜索来填充20个地方,并将它们放在一个可观察的数组中。然后,我还用数组中的所有位置填充一个列表。
我想让每个列表项都可以点击,然后让地图平移到每个地方的标记并打开一个信息窗口。
这是我的一些代码:
HTML:
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a Location">
<div id="map-canvas"></div>
<div id="list">
<h2 style="text-align: center;">Good Eats!</h2>
<ul data-bind="foreach: allPlaces">
<li data-bind="click: $parent.clickMarker">
<p data-bind="text: name"></p>
<p data-bind="text: address"></p>
</li>
</ul>
</div>
</body>
Javascript:
function appViewModel() {
var self = this;
var map;
var service;
var infowindow;
var chapelHill = new google.maps.LatLng(35.908759, -79.048100);
var markersArray = [];
var marker;
self.allPlaces = ko.observableArray([]);
self.clickMarker = function(place) {
console.log('clicked');
for(var e in markersArray)
if(place.place_id === markersArray[e].place_id) {
map.panTo(markersArray[e].place_id);
}
}
function getAllPlaces(place){
var myPlace = {};
myPlace.address = place.vicinity;
myPlace.place_id = place.place_id;
myPlace.position = place.geometry.location.toString();
myPlace.name = place.name;
self.allPlaces.push(myPlace);
}
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
name: place.name.toLowerCase(),
position: place.geometry.location,
place_id: place.place_id,
animation: google.maps.Animation.DROP
});
var address;
if (place.vicinity !== undefined){
address = place.vicinity;
} else if (place.formatted_address !== undefined){
address = place.formatted_address;
}
var contentString = '<div class="strong">' +place.name+ '</div><div>' + address + '</div>';
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, this);
map.panTo(marker.position);
});
return marker;
}
我被clickMarker
函数卡住了。
为了节省空间,我保留了一些javascript。
如果你想查看整个代码,这里有一个链接到我的gh页面:
http://tarheelsrule44.github.io/
正如你可能知道的,我一直在摆弄这个代码,甚至把它弄得一团糟。
很抱歉有不清楚的问题,但我想明白了。
我将clickMarker功能更改为:
self.clickMarker = function(place) {
console.log('clicked');
for(var e in markersArray)
if(place.place_id === markersArray[e].place_id) {
map.panTo(markersArray[e].position);
}
}
最初,我错误地放置了map.panTo(markersArray[e].place_id);当然,这毫无意义。我想这就是我在没有咖啡的情况下深夜编码的结果。