1

我在谷歌地图的文本框中有一个地点列表。当一个人点击文本框中的一个地方时，我希望谷歌地图中该位置的相应标记反弹。关于如何完成这项工作的任何想法？现在，我只能在单击标记本身时使标记反弹。这是我的代码：

var Points = [ {
    name: 'Duomo-Cathedral',
    lat: 43.7732,
    long: 11.2560,    
    url: 'http://www.google.com'
   
    }, {

    name: 'Orsanmichele-Church',  
    lat: 43.770947,
    long: 11.254981,    
    url: 'http://www.google.com' 
    }, {

    name: 'Ponte Vecchio-Old Bridge',  
    lat: 43.768350,
    long: 11.253323,   
    url: 'http://www.google.com'
    }, {

    name: 'Galleria delgi Uffizzi-Art Gallery',  
    lat: 43.768657,
    long: 11.255737,    
    url: 'http://www.google.com'
    }, {

    name: 'Santa Croce-Church',  
    lat: 43.768816,
    long: 11.262394, 
    add1: 'Piazza Santa Croce, 16', 
    add2: ' Florence, Italy 50122',
    phone: '+39 055 246 6105',   
    url: 'https://www.santacroceopera.it/'
    }, {

    name: 'Palazzo Vecchio-TownHall',  
    lat: 43.769670,
    long: 11.256075,    
    url: 'https://www.google.com'
    }, {

    name: 'Piazza della Signoria-OpenSquare',  
    lat: 43.769725,
    long: 11.255474,    
    url: 'http://www.google.com/'
    }, {

    name: 'Santa Maria Novella-Church',  
    lat: 43.774502,
    long: 11.249466,   
    url: 'https://www.google.com' 
    }, {

    name: 'Santa Maria Novella-TrainStation',  
    lat: 43.776261,
    long: 11.248737,    
    url: 'https://www.google.com'
    }, {

    name: 'San Lorenzo- ChurchMarket',  
    lat: 43.774858,
    long: 11.254584,    
    url: 'http://www.google.com'
    }
];


var markersArray = ko.observableArray([]);
Points.forEach(populateMarkersArray);

function populateMarkersArray(element) { //, index, array
    markersArray.push(element);
}

// Set up a google map
var mapOptions = {
    center: { lat: 43.771341,lng: 11.256875}, 
    zoom: 16
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

function initialize() {
    Points.forEach(loadMarkers);

    var infowindow0 = new google.maps.InfoWindow();
    var marker0 = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
    });

    google.maps.event.addListener(function() {
        infowindow0.close();
        marker0.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;
        }

  // If the place has a geometry, then present it on a map.
       
        marker0.setIcon(/** @type {google.maps.Icon} */({
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(35, 35)
        }));
        marker0.setPosition(place.geometry.location);
        marker0.setVisible(true);

         

 infowindow0.setContent('<div><strong>' + place.name + '</strong><br>' + address);
        infowindow0.open(map, marker0);
    });
 
}

google.maps.event.addDomListener(window, 'load', initialize);

function loadMarkers(element) { //, index, array
    var myLatlng = new google.maps.LatLng(element.lat,element.long);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: element.name
    });
    loadInfoWindow(element, marker);
}

function loadInfoWindow(element, marker) {
    var contentString = '<div class="strong"><a href="' + element.url + '" target="_blank">' + element.name + '</a></div><div>' + element.add1 + '</div><div>' + element.add2 + '</div><div>'+ element.phone + '</div>';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
        toggleBounce(marker);
    });
}

 function toggleBounce(marker) {
    if (marker.getAnimation() != null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}


function viewModel() {


  }
  ko.applyBindings(new viewModel()); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Animations</title>
   <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0;  }
  #map-canvas { height: 100% }
.place-list {
  
  display: inline-block;
  width: 250px;
  max-height: 70%;
  float: right;
  position: absolute;
  top: 40px;
  right: 6px;
  z-index: 5;
  overflow-y: auto;
  background-color: white;
   border: 2px solid grey;
  opacity: 0.8;
  list-style-type: none;
  padding: 20px;
  margin: auto;
  font-weight: bolder;
  border-radius: 25px;
}
</style>       
  </head>
  <body>
    <ul class="place-list" data-bind="foreach: Points" >
        <li data-bind="text: name, click: $parent.marker" ></li>
    </ul> 

     
    <div id="map-canvas"></div>
       
 <script type="text/javascript" src="https://maps.googleapis.Com/maps/api/js?key=AIzaSyCPgww-LhtxoQqq2zLI1_gOU1L2XayS-rE"> </script>
 <script src="js/lib/knockout-3.2.0.js"></script>
 <script src="js/app.js"></script>
  </body>
</html>

谢谢你的帮助，马克斯

4

1 回答 1

0

一种方法是使用Knockout.js 数据绑定。特别是，您可以使用foreach 绑定将所有项目显示为列表并将函数应用于每个项目。然后使用单击绑定在用户单击列表项时执行附加到列表项的函数。如何将其用于具有搜索功能的 Google 地图中的地点列表视图的示例：

HTML：

<h4>Places</h4>
  <input type="text" id="my-Input" data-bind="textInput: filter" placeholder="Search for places..">
  <div class="scroll" id="my-UL">
      <ul data-bind="foreach: visiblePlaces">
         <li>
             <input data-bind="value: title, click: $parent.zoomToPlace, text: address" type="button" class="btn btn-small btn-link" id="zoomTo">
         </li>
      </ul>
  </div>

JS：

/ ViewModel - provides list view of places, on click zooms map, shows the marker, infowindow, etc.
function viewModel() {
    var self = this;
    self.places = ko.observableArray(locations);
    self.address = ko.observable();
    self.title = ko.observable();
    self.id = ko.observable();
    this.filter = ko.observable();
    this.visiblePlaces = ko.computed(function() {
        return this.places().filter(function(place) {
            if (!self.filter() || place.title.toLowerCase().indexOf(self.filter().toLowerCase()) !== -1)
                return place;
        });
    }, this);
    //Zooms to a selected marker and open infowindow
    self.zoomToPlace = function() {
        // Initialize the geocoder.
        var geocoder = new google.maps.Geocoder();
        // Get the place.
        var address = this.address;
        var id = this.id;
        // Geocode the address/area entered to get the center. Then, center the map on it and zoom in
        geocoder.geocode({
            address: address,
        }, function(results, status) {
            map.setCenter(results[0].geometry.location);
            map.setZoom(15);
            google.maps.event.trigger(markers[id], 'click');
        });
    };
}
var vm = new viewModel();
ko.applyBindings(vm);

这将从数组中生成位置列表（样式和数组未显示在代码中），并且相应的标记将打开一个信息窗口并反弹。

如需完整代码，您可以在我的仓库中查看：https ://github.com/DmitryGrechko/Neighborhood_Map

于 2017-07-15T01:18:46.793 回答