如何通過點擊一個按鈕

Question

我試圖讓一個按鈕，改變了我的地圖的位置改變谷歌地圖的位置，我見過很多答案，但我似乎無法使這些腳本在我的地圖或工作在我的網站上，我很混亂，我不明白爲什麼他們不會工作。

這是我的代碼：

HTML：

<div class="info-map"> 
<ul class="loks"> 

    <li class="active"> 
    <a id="link1" href="#office" data-toggle="tab"> office </a></li> 

    <li> 
    <a id="link2" href="#showroom" data-toggle="tab"> showroom </a></li> 

</ul></div> 

<div id="map"></div> 

CSS：

#map { 
    height: 400px; 
    } 

    .info-map { 
    position: absolute; 
    z-index: 1; 
    background: white; 
    top: 30px; 
    left: 8%; 
    } 

SCRIPT：

var map; 
function initMap() { 

var office = { 
    info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA', 
    lat: 26.0020213, 
    long: -80.2058833 
}; 

var showroom = { 
    info: '<strong>Showroom</strong><br>1025 W Belmont Ave<br> Chicago, IL 60657', 
    lat: 41.939670, 
    long: -87.655167 
}; 

var locations = [ 
    [office.info, office.lat, office.long, 0], 
    [showroom.info, showroom.lat, showroom.long, 1], 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 15, 
    center: new google.maps.LatLng(26.0020213, -80.2058833), 
    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 
    }); 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 
} 

我發現這個googleAPI解決方案，幫助我一點點，但我似乎無法使它與這兩個位置

google.maps.event.addDomListener(document.getElementById('link2'), 
'click', function() { 

map.setCenter(new google.maps.LatLng(10.23,123.45)); 
}); 

Answer 1

您的代碼有一些問題的工作。請妥善關閉info:數據。你錯過了單引號和逗號。

變化

info: '<strong>Architectural Art Crete - Office</strong><br>\ 5815 Dewey St, Hollywood, FL 33023, USA, 要

info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA',

查看更新的代碼。

var map; 
function initMap() { 

    var office = { 
     info: '<strong>Architectural Art Crete - Office</strong><br>5815 Dewey St, Hollywood, FL 33023, USA', 
     lat: 26.0020213, 
     long: -80.2058833 
    }; 

    var showroom = { 
     info: '<strong>Showroom</strong><br>1025 W Belmont Ave<br> Chicago, IL 60657', 
     lat: 41.939670, 
     long: -87.655167 
    }; 

    var locations = [ 
     [office.info, office.lat, office.long, 0], 
     [showroom.info, showroom.lat, showroom.long, 1], 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(26.0020213, -80.2058833), 
     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 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
} 

一個解決方法是在這裏：

google.maps.event.addDomListener(document.getElementById('link2'), 'click', function() { map.setCenter(new google.maps.LatLng(10.23,123.45)); } });

此功能沒有正確關閉一個}失蹤。
檢查更新後的新代碼。

Answer 2

你的緯度和經度似乎也成爲一個問題。使用下面的內容並確保在initMap函數中包含這些函數。它會工作。

  google.maps.event.addDomListener(document.getElementById('link2'), 
              'click', function() { 
       map.setCenter(new google.maps.LatLng(showroom.lat, showroom.long)); 
      }); 
      google.maps.event.addDomListener(document.getElementById('link1'), 
              'click', function() { 
       map.setCenter(new google.maps.LatLng(office.lat, office.long)); 
      });