하나의 버튼을 클릭하여 임의의 마커를 연속적으로 Google지도 센터를 변경하는 방법

Question

프로그래밍하기가 매우 쉽습니다. Google Maps API v3에 임의의 4 개의 마커를 추가하고 웹 페이지에이 버튼에 하나씩지도를 표시하는 고전적인 버튼을 추가하려고합니다. 센터가 세 번째 마커에있는 경우 다음 클릭은 첫 번째 마커 등의 중심에지도를 표시해야합니다. jquery 또는 기본 javascript 및 html을 제외한 다른 라이브러리를 사용할 수 없습니다.

Answer 1

Previous SO Answer에서 코드를 사용하고 기존 코드에 map.panTo(marker.getPosition());을 추가하면 마커 목록을 기반으로지도가 중앙에 배치됩니다. 클릭하거나 클릭하면 클릭됩니다.

더 나은 결과를 높게 내 친구를 감사 의견에 대한

// Locations: [title, lat, long, number] 
 
var locations = [ 
 
    ['Bar Termini', 51.51367, -0.12981, 1], 
 
    ['French House', 51.51272, -0.13170, 2], 
 
    ['Mark\'s Bar', 51.51133, -0.13563, 3], 
 
    ['Hakkasan (bar)', 51.51017, -0.14474, 4], 
 
    ['Bar Américain at Brasserie Zédel', 51.51027, -0.14474, 5], 
 
    ['Experimental Cocktail Club', 51.51193, -0.13103, 6], 
 
    ['Milk & Honey', 51.51377, -0.13653, 7], 
 
    ['Blind Pig', 51.51379, -0.13668, 8], 
 
    ['Opium', 51.51176, -0.13145, 9] 
 
]; 
 
var gmarkers = []; 
 
// Map Settings 
 
var map = new google.maps.Map(document.getElementById("map"), { 
 
    zoom: 16, 
 
    center: new google.maps.LatLng(51.51367, -0.12981), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}); 
 

 
var infowindow = new google.maps.InfoWindow; 
 

 
var marker, i; 
 
for (i = 0; i < locations.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
    map: map, 
 
    label: String(locations[i][3]) 
 
    }); 
 
    gmarkers.push(marker); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
    return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
     map.panTo(marker.getPosition()); 
 
    } 
 
    })(marker, i)); 
 
} 
 

 
function centerMap(obj) { 
 
    google.maps.event.trigger(gmarkers[obj], 'click'); 
 
} 
 

 
function pickRandom() { 
 
    var rnd = Math.floor(Math.random() * 7) + 0; 
 
    google.maps.event.trigger(gmarkers[rnd], 'click'); 
 
}

#map { 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
a { 
 
    cursor: pointer; 
 
}

<div data-role="page" id="map_result"> 
 
    <div data-role="header" data-position="fixed"> 
 
    <h1>Multiple Marker</h1> 
 
    </div> 
 
    <div data-role="content" style="padding:0;"> 
 
    <div id="map"></div> 
 
    <button onclick="pickRandom()">Random Select</button> 
 
    <div id="list"> 
 

 
     <ol>Click on Link Below 
 
     <li onclick="centerMap(0)"> 
 
      <a>Bar Termini</a> 
 
     </li> 
 
     <li onclick="centerMap(1)"> 
 
      <a>French House</a> 
 
     </li> 
 
     <li onclick="centerMap(2)"> 
 
      <a>Mark's Bar</a> 
 
     </li> 
 
     <li onclick="centerMap(3)"> 
 
      <a>Hakkasan (bar)</a> 
 
     </li> 
 
     <li onclick="centerMap(4)"> 
 
      <a>Bar Americain at Brasserie Zedel</a> 
 
     </li> 
 
     <li onclick="centerMap(5)"> 
 
      <a>Experimental Cocktail Club</a> 
 
     </li> 
 
     <li onclick="centerMap(6)"> 
 
      <a>Milk &amp; Honey</a> 
 
     </li> 
 
     <li onclick="centerMap(7)"> 
 
      <a>Blind Pig</a> 
 
     </li> 
 
     <li onclick="centerMap(8)"> 
 
      <a>Opium</a> 
 
     </li> 
 
     </ol> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>