Блог

На моей веб-странице у меня есть следующий HTML-код:

 <p id="info-1"> My Title</p>
<button type="button" id="showMap-1" class="btn btn-primary btn-xs">Show On Map</button>
<input type="hidden" id="lat-1" value="32.3396528">
<input type="hidden" id="lon-1" value="-111.0118179">
  

И у меня есть следующий сценарий:

 $(document).on( 'click','button[id^="showMap-"]', function(event) {
    event.preventDefault();
    var arr = this.id.split('-');
    var count = arr[1];
    var latVal = $("#lat-" count).val();
    var lonVal = $("#lon-" count).val();
    var titleVal = $("#info-" count).text();
    var newCenter = {lat: latVal, lng: lonVal};
    var map = new google.maps.Map(
    document.getElementById('map'), {zoom: 4, center: newCenter});
    var marker = new google.maps.Marker({position: newCenter, map: map, title: titleVal});
});
  

Я пытаюсь повторно инициализировать карту Google на основе выбранного местоположения. Но я получаю следующую ошибку:

InvalidValueError: setCenter: не LatLng или LatLngLiteral: в свойстве lat: не число

Но тот же сценарий работает, если я устанавливаю значения напрямую

 var latVal = -25.344;
var lonVal = 131.036;
var titleVal = "test";
var newCenter = {lat: latVal, lng: lonVal};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: newCenter});
var marker = new google.maps.Marker({position: newCenter, map: map, title: titleVal}); 
  

Я должен динамически устанавливать значения и повторно инициализировать карту на основе выбранного местоположения.

Как указано в ошибке, latVal и lonVal не являются числами. Они являются строковыми.

Вы можете преобразовать строку в число, поставив перед strin . Нравится:

 var latVal =  $("#lat-" count).val();
var lonVal =  $("#lon-" count).val();
  

.. Или вы также можете использовать parseFloat() like:

 var latVal = parseFloat( $("#lat-" count).val() );
var lonVal = parseFloat( $("#lon-" count).val() );