簡單的點擊事件谷歌地圖

我想包括this點擊事件到我現有的谷歌地圖（見下面的代碼）。我需要它在標記上發生點擊事件時縮放地圖。它目前放大但是到地圖的不同部分？也許是因爲我在同一張地圖上有多個標記？簡單的點擊事件谷歌地圖

編輯：我做了一個codepen證明here

var locations = [ 
    ['Aberdar/Aberdare', 51.710501, -3.442823, 1], 
    ['Bangor', 53.208431, -4.185703, 2], 
    ['Caerdydd', 51.464783, -3.163191, 3], 
    ['Llangefni', 53.290704, -4.503386, 4], 
    ['Caerfyrddin', 51.858370, -4.328699, 5], 
    ['Dinbych/Denbigh', 53.193235, -3.414290, 6], 
    ['Llanuwchllyn', 52.871170, -3.662876, 7], 
    ['Llangrannog', 52.162539, -4.447742, 8], 
    ['Y Drenewydd/Newtown', 52.512730, -3.312657, 9], 
    ['Abertawe/Swansea', 51.651185, -3.959457, 10], 
    ['Pentre Ifan', 52.008379, -4.779861, 11], 
    ['Yr Wyddgrug/ Mold', 53.178779, -3.118454, 12] 
]; 

function initialize() { 

    var latlng = new google.maps.LatLng(52.407118, -2.929305); 

    var styles = [ 
     { 
      "featureType": "water", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "color": "#a2daf2" 
       } 
      ] 
     }, 
     { 
      "featureType": "landscape.man_made", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "color": "#f7f1df" 
       } 
      ] 
     }, 
     { 
      "featureType": "landscape.natural", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "color": "#d0e3b4" 
       } 
      ] 
     }, 
     { 
      "featureType": "landscape.natural.terrain", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi.park", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "color": "#bde6ab" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi", 
      "elementType": "labels", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi.medical", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "color": "#fbd3da" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi.business", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "road", 
      "elementType": "geometry.stroke", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "road", 
      "elementType": "labels", 
      "stylers": [ 
       { 
        "visibility": "off" 
       } 
      ] 
     }, 
     { 
      "featureType": "road.highway", 
      "elementType": "geometry.fill", 
      "stylers": [ 
       { 
        "color": "#ffe15f" 
       } 
      ] 
     }, 
     { 
      "featureType": "road.highway", 
      "elementType": "geometry.stroke", 
      "stylers": [ 
       { 
        "color": "#efd151" 
       } 
      ] 
     }, 
     { 
      "featureType": "road.arterial", 
      "elementType": "geometry.fill", 
      "stylers": [ 
       { 
        "color": "#ffffff" 
       } 
      ] 
     }, 
     { 
      "featureType": "road.local", 
      "elementType": "geometry.fill", 
      "stylers": [ 
       { 
        "color": "black" 
       } 
      ] 
     }, 
     { 
      "featureType": "transit.station.airport", 
      "elementType": "geometry.fill", 
      "stylers": [ 
       { 
        "color": "#cfb2db" 
       } 
      ] 
     } 
    ]; 

    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: 'Styled', 
     mapTypeControl: false, 
     scrollwheel: false, 
     streetViewControl: false, 
     zoomControl: true, 
     scaleControl: false, 
     draggable: true, 
     mapTypeControlOptions: { 
      mapTypeIds: [ 'Styled'] 
     } 

    }; 
    var map = new google.maps.Map(document.getElementById("map"), 
     myOptions); 

    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); 
    map.mapTypes.set('Styled', styledMapType); 

    setMarkers(map,locations); 

    $(window).resize(function() { map.setCenter(latlng) }); 

} 

function setMarkers(map,locations){ 

    var marker, i 

    for (i = 0; i < locations.length; i++) { 

     var loan  = locations[i][0]; 
     var lat   = locations[i][3]; 
     var long  = locations[i][2]; 
     var marker_num = locations[i][3]; 

     var map_marker = new google.maps.MarkerImage('<?php echo $this->getThemePath(); ?>/images/global/map-marker-'+marker_num+'.png', 
      new google.maps.Size(22,33), 
      new google.maps.Point(0,0) 
     ); 

     latlngset = new google.maps.LatLng(lat, long); 

     var marker = new google.maps.Marker({ 
      map: map, 
      title: loan, 
      position: latlngset, 
      icon: map_marker 
     }); 

     var content = "<h3 class=\"mapHeading\">" + loan + "</h3>";  

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

     google.maps.event.addListener(map, 'center_changed', function() { 
      // 3 seconds after the center of the map has changed, pan back to the 
      // marker. 
      window.setTimeout(function() { 
       map.panTo(marker.getPosition()); 
      }, 3000); 
     }); 

     google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
       return function() { 
        infowindow.setContent(content); 
        infowindow.open(map,marker); 
        map.setZoom(14); 
        map.setCenter(marker.getPosition()); 
       }; 
      })(marker,content,infowindow)); 

    } 
} 

$(function() { 
    initialize(); 
});

來源

2014-10-09 Rob Morris

刪除center_changed章24 -listener的地圖（這個監聽器會始終在同一位置顯示在地圖中心）
設置disableAutoPan - 選擇infowindow至true（以避免當infowindow打開時內置的地圖平移）

集center和點擊監聽器裏的地圖zoom：

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
      return function() { 
       infowindow.setContent(content); 
       infowindow.open(map,marker); 
       map.setOptions({zoom:14,center:marker.getPosition()}); 
      }; 
     })(marker,content,infowindow));

來源

2014-10-09 09:06:20

簡單的點擊事件谷歌地圖

回答

相關問題