将变量传递给映射函数

Question

我正在尝试将一些经度和纬度变量发送到一个函数，然后生成一个 Google 地图。

从检索存储在数据库中的各种信息的数据表开始，我使用数据属性来存储每条记录的 lng 和 lat。选择记录后，将打开一个模式并显示地图。

我能够使用默认 lng 和 lat 点显示地图。但是现在我需要在每次选择记录时创建一个新地图。

从触发模式打开的onclick事件开始（尽可能缩短）：

$('#example1').on('click', 'tr > td > a.actionMatch', function(e) 
{
  e.preventDefault();

  var actimpbill = $(this).attr('data-actimpbill'); // random record info
  var actramplat = parseFloat($(this).attr('data-actramplat')); // first lat
  var actramplng = parseFloat($(this).attr('data-actramplng')); // first lng
  var actdellat = parseFloat($(this).attr('data-actdellat')); // second lat
  var actdellng = parseFloat($(this).attr('data-actdellng')); // second lng

  // my map was opening in a grey box. this next piece of code fixed that
  $("#actionMatchbackModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
  });

  initMap(actramplat, actramplng, actdellat, actdellng); // my attempt to call a function and the variables to it

  $('#actionMatchbackModal').modal('show'); // show the modal
});

这里是设置地图的函数。它位于打开模式的初始 onclick 事件之外（我不确定这是否有问题）。这是我试图传递我在 onclick 事件中创建的变量的地方：

function initMap(actramplat, actramplng, actdellat, actdellng)
{
  // map options
  var options = {
    zoom: 8,
    center: {actramplat, actramplng}
  }

  // new map
  var map = new google.maps.Map(document.getElementById('map'), options);

  // add marker
  var marker = new google.maps.Marker({
    position:{actdellat, actdellng},
    map: map
  });
}

我可能正在扼杀函数调用。该函数曾经包含默认的 lat 和 lng 数字，我能够正确生成地图。

编辑

我刚刚检查了控制台，我收到了以下错误：

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

编辑

我刚刚将 parseFloat 添加到变量中以确保它们不是字符串，但仍然没有成功。

编辑

数据属性如下所示：

<a href="#" class="actionMatch" id="actionMatch" 
data-toggle="modal" data-actimpbill="xxxxxxxx" 
data-actramplat="39.11" data-actramplng="-94.63" 
data-actdellat="39.03" data-actdellng="-96.83"
data-actreclat="39.84" data-actreclng="-96.65"
rel="tooltip" data-placement="right" title="Action Matchback"></a>

在上面的A标签中可以看到actramplat、actramplng、actdellat、actdellng。

Answer 1

查看他们的API，他们希望将经纬度值作为对象文字提供，如下所示：var myLatLng = {lat: -25.363, lng: 131.044};

所以你需要这样称呼它：

// map options
  var options = {
    zoom: 8,
    center: {lat: dellat, lng: dellng}
  }

  // new map
  var map = new google.maps.Map(document.getElementById('map'), options);

  // add marker
  var marker = new google.maps.Marker({
    position:{lat: reclat, lng: reclng},
    map: map
  });