Question

我的女朋友说她会有一个Toblerone酒吧正确答案......那应该告诉你我已经在这个地方待了几个小时。

无论如何，我有两个问题：

信息窗口中的重复内容。很沮丧。我很欣赏这是一个重复的问题（x很多），但我对这一切都是新手，并且不能为我的生活遵循这些例子。
谷歌地方搜索就像一个魅力，但是，我想在选择位置后将缩放设置为8。目前搜索触发，我正在看一个相当紧凑的缩放级别。

任何帮助，小提琴或任何内容都将不胜感激。

签名，累了＆amp;激怒

<script>
 var map;
 function initialize() {
     var markers = [];
     var mapOptions = {
         zoom: 4,
         scrollwheel: false,
        streetViewControl: true,
        panControl: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        },

         center: new google.maps.LatLng(-25.898854, 134.091377),
     };
     map = new google.maps.Map(document.getElementById('map-canvas'),
     mapOptions);

     setMarkers(map, beaches);

     infowindow = new google.maps.InfoWindow({
         content: "Loading..."
     });

     var input = /** @type {HTMLInputElement} */(
         document.getElementById('pac-input'));
         map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

     var searchBox = new google.maps.places.SearchBox(
         /** @type {HTMLInputElement} */(input));

     google.maps.event.addListener(searchBox, 'places_changed', function() {
        var places = searchBox.getPlaces();

        for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
     }

     markers = [];
     var bounds = new google.maps.LatLngBounds();
     for (var i = 0, place; place = places[i]; i++) {

     var image = {
         //url: 'assets/img/icon_pin.png',
         //size: new google.maps.Size(40, 52),
         //origin: new google.maps.Point(0, 0),
         //anchor: new google.maps.Point(26, 20)
     };

     var marker = new google.maps.Marker({
         map: map,
         icon: image,
         title: place.name,
         position: place.geometry.location

     });

     markers.push(marker);
        bounds.extend(place.geometry.location);
     }

     map.fitBounds(bounds);
 });

google.maps.event.addListener(map, 'bounds_changed', function() {       
    var bounds = map.getBounds();
        searchBox.setBounds(bounds);

        map.setCenter(marker.getPosition());
    });
 }

 var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

 function setMarkers(map, locations) {
     var image = {
         url: 'assets/img/icon_pin.png',
         size: new google.maps.Size(40, 52),
         origin: new google.maps.Point(0,0),
         anchor: new google.maps.Point(26, 20)
     };

     var shape = {
         coord: [1, 1, 1, 52, 40, 52, 40 , 1],
         type: 'poly'
     };
     for (var i = 0; i < locations.length; i++) {
         var beach = locations[i];
         var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
         var marker = new google.maps.Marker({
             position: myLatLng,
             map: map,
             icon: image,
             shape: shape
         });

        var contentString = '<div class="siteNotice"><h4>'+beach[0]+'</h4></div>';                

         google.maps.event.addListener(marker, "click", function () {
             infowindow.setContent(contentString);
             infowindow.open(map, this);
         });
     }
 }
 google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

工作代码：

> var map;
>         function initialize() {
>             var markers = [];
>             var mapOptions = {
>                 zoom: 4,
>                 scrollwheel: false,
>               streetViewControl: true,
>               panControl: true,
>               zoomControl: true,
>               zoomControlOptions: {
>                   style: google.maps.ZoomControlStyle.LARGE
>               },
> 
>                 center: new google.maps.LatLng(-25.898854, 134.091377),
>             };
>             map = new google.maps.Map(document.getElementById('map-canvas'),
>             mapOptions);
>             
>             setMarkers(map, beaches);
>     
>             infowindow = new google.maps.InfoWindow({
>                 content: "Loading..."
>             });
>             
>             var input = /** @type {HTMLInputElement} */(
>                 document.getElementById('pac-input'));
>                 map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
>             
>             var searchBox = new google.maps.places.SearchBox(
>                 /** @type {HTMLInputElement} */(input));
>     
>             google.maps.event.addListener(searchBox, 'places_changed', function() {
>               var places = searchBox.getPlaces();
>               
>               for (var i = 0, marker; marker = markers[i]; i++) {
>                   marker.setMap(null);
>                   
>                   map.setZoom(8)
>               }
>     
>               markers = [];
>               var bounds = new google.maps.LatLngBounds();
>               for (var i = 0, place; place = places[i]; i++) {
>   
>               var image = {
>                   //url: 'assets/img/icon_pin.png',
>                   //size: new google.maps.Size(40, 52),
>                   //origin: new google.maps.Point(0, 0),
>                   //anchor: new google.maps.Point(26, 20)
>               };
>       
>               var marker = new google.maps.Marker({
>                   map: map,
>                   icon: image,
>                   title: place.name,
>                   position: place.geometry.location
>   
>               });
>       
>               markers.push(marker);
>                   bounds.extend(place.geometry.location);
>               }
>     
>               map.fitBounds(bounds);
>               
>               map.setZoom(11)
>           });
> 
>       google.maps.event.addListener(map, 'bounds_changed', function() {       
>           var bounds = map.getBounds();
>               searchBox.setBounds(bounds);
>               
>               map.setCenter(marker.getPosition());            });
>         }
>     
>        var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];
>     
>         function setMarkers(map, locations) {
>             var image = {
>                 url: 'assets/img/icon_pin.png',
>                 size: new google.maps.Size(40, 52),
>                 origin: new google.maps.Point(0,0),
>                 anchor: new google.maps.Point(26, 20)
>             };
>       
>             var shape = {
>                 coord: [1, 1, 1, 52, 40, 52, 40 , 1],
>                 type: 'poly'
>             };
>             for (var i = 0; i < locations.length; i++) {
>                 var beach = locations[i];
>                 var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
>                 var marker = new google.maps.Marker({
>                     position: myLatLng,
>                     map: map,
>                     icon: image,
>                     shape: shape
>                 });
>             
>           
>               
>               var contentString = '<div class="siteNotice"><h4>'+beach[0]+'</h4></div>';                
>               (function(contentString){
>                 google.maps.event.addListener(marker, "click", function () {
>                     infowindow.setContent(contentString);
>                     infowindow.open(map, this);
>                 });
>               
>               })(contentString);
>             }
>         }
>         google.maps.event.addDomListener(window, 'load', initialize);

谷歌地图v3 - 事件后放大＆amp;信息窗口问题

1 个答案: