Google地圖SetCenter。專注於新位置

Question

我使用谷歌地圖並在http://www.dentalo.se/search/stockholm上渲染了許多標記，並且工作正常。 我想要做的是當有人點擊一個按鈕我想使用map.SetCenter並專注於該位置。

我有一個信息按鈕

當它在用戶點擊我打電話的JavaScript函數，並設置中心。但沒有工作。當我點擊信息時，它就變成灰色。你可以自己嘗試一下，看看http://www.dentalo.se/search/stockholm有什麼驚喜。

function showCompany(latlong) { 
    map.setCenter(latlong); 
    alert(latlong); 
} 

這是渲染地圖

var p = $("#map_search"); 
     var position = p.position(); 
     $("#directionsPanel").css({top: position.top, position:'absolute'}); 

     var map; 
     var addressField; 
     var geocoder; 
     $(document).ready(function() { 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(ShowPosition); 
      } 
      else { 
       x.innerHTML = "Geolocation is not supported by this browser."; 
      } 
      function showError(error) { 
       switch (error.code) { 
        case error.PERMISSION_DENIED: 
         alert("User denied the request for Geolocation."); 
         break; 
        case error.POSITION_UNAVAILABLE: 
         alert("Location information is unavailable."); 
         break; 
        case error.TIMEOUT: 
         alert("The request to get user location timed out."); 
         break; 
        case error.UNKNOWN_ERROR: 
         alert("An unknown error occurred."); 
         break; 
       } 
      } 
      function ShowPosition(position) { 
       //begin rest call 
       $("#latitude").val(position.coords.latitude); 
       $("#longitude").val(position.coords.longitude); 
       var from = $("#latitude").val() + "," + $("#longitude").val(); 
       var urlParts = window.location.href.split('/'), 
        Id = urlParts[(urlParts.length - 1)]; 
       $.ajax({ 
        type: "GET", 
        cache: true, 
        async: false, 
        url: "/RestService/Dentalo.svc/CompaniesByState/" + Id, 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (data) { 
         map = new GMaps({ 
          el: 'map_search', 
          //center: Id, 
          lat: data[0].State.Latitude ,//position.coords.latitude, 
          lng: data[0].State.Longitude, 
          zoom: 14, 
          zoomControl: true, 
          mapTypeId: google.maps.MapTypeId.ROADMAP, 
          mapTypeControlOptions: { 
           style: google.maps.MapTypeControlStyle.DEFAULT, 
           position: google.maps.ControlPosition.RIGHT_RIGHT 
          }, 

          panControl: true, 
          panControlOptions: { 
           position: google.maps.ControlPosition.RIGHT_TOP 
          }, 

          zoomControl: true, 
          zoomControlOptions: { 
           style: google.maps.ZoomControlStyle.LARGE, 
           position: google.maps.ControlPosition.RIGHT_TOP 
          }, 
          panControl: true, 
          scrollwheel: true 
         }); 
         map.addMarker({ 
          lat: position.coords.latitude, 
          lng: position.coords.longitude, 
          title: 'Min position', 
          icon: 'http://www.dentalo.se/assets/img/map/user_x64.png' 
         }); 
         var h = ""; 
         $.each(data, function (index, item) { 
          var to = item.Latitude + "," + item.Longitude; 
          h += "<div class='row buttons-page'>" + 
             "<div class='col-md-8 col-sm-4'>" + 
              "<h4>"+ item.Name + "</h4>" + 
              "<p style='margin: 1px;'>" + item.Address + ", " + item.County.Name + "</p>" + 
              "<p style='margin: 1px;'>" + item.Phone + "</p>" + 
              "<p style='margin: 1px;'>Distans: " + calcRoute(from, to) + "</p>" + 
             "</div>" + 
             "<div class='col-md-3 col-sm-9'>" + 
              "<div class='btn-group'>" +             
               "<a href='/booking/"+ item.CompanyId +"' class='btn " + bookable(item.Status) + " " + SetDisplayClass(item.Status) +"'>Boka <i class='m-icon-swapright m-icon-white'></i></a>" + 
               "<button type='button' class='btn default' onClick='showCompany(&apos;" + to + "&apos;);return false;'>Information <i class='icon-info-sign m-icon-white'></i></button>" + 
              "</div>" + 
             "</div>" + 
            "</div>" + 
            "<hr style='margin: 1px;' />"; 
          map.addMarker({ 
              lat: item.Latitude , 
              lng: item.Longitude , 
              title: item.Address , 
              icon: GetMarkerImage(item.Status), 
              infoWindow: { 
               content: '<div style="width: 300px"><h4>' + item.Name + '</h4><br /><p>' + item.Address + ', ' + item.County.Name + '</p><div class="four columns alpha"><a class="btn blue ' + SetDisplayClass(item.Status) + '" href="/booking/' + item.CompanyId + '" ><i class="m-icon-swapright m-icon-white"></i> Boka</a> <a href="#" onClick="showPopUp(&apos;' + item.CompanyId +'&apos;);return false;" class="btn default">Information</a></div></div>', 
              } 
           }) 
         }); 
         $("#search_panel").html(h).show(); 
        }, 
        error: function (msg, url, line) { 
         //alert('error trapped in error: function(msg, url, line)'); 
         alert('msg = ' + msg + ', url = ' + url + ', line = ' + line); 
        } 
       }); 
       //end rest call 

       // Define Gecoder 
       geocoder = new google.maps.Geocoder(); 

       // Init searchbox 
       initSearchBox(); 

       // main directions 

      } 

jQuery代碼我怎樣才能設置SetCenter當用戶點擊「信息」按鈕？

在此先感謝。

Answer 1

map.setCenter(latlong);

經緯度必須是google.maps.LatLng對象，但在你的情況，你傳遞一個字符串給你的函數。

<button onclick="showCompany('59.3618356,18.0140273');return false;">Information</button> 

所以這是行不通的。

而是嘗試：

<button onclick="showCompany('59.3618356','18.0140273');return false;">Information</button> 

而且

function showCompany(lat, lng) { 
    var position = new google.maps.LatLng(lat, lng); 
    map.setCenter(position); 
    alert(lat, lng); 
}