Question

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

从检索存储在数据库中的各种信息的数据表开始，我使用数据属性来存储每条记录的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，他们希望将lat / long值作为对象文字提供，如下所示：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
  });

将变量传递给map函数

修改

修改

修改

1 个答案: