在 gmaps api 中使用参数调用函数 initmap

Question

我有这个函数，谷歌地图api教程的默认函数，我刚刚添加了2个参数latt和lngg。

function initMap(latt,lngg) {


    var uluru = {lat: latt , lng: lngg};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

我想像他们那样称呼它：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmjE35Pm1eDdyF6Vg3WC69opkqLIVt3GY&callback=initMap">
</script>

但是每次使用不同的参数，因为我会有6000张地图，我想为每个函数调用脚本

我不知道像 &callback=initMap(latt,lngg) 这样的东西是否可行。

非常感谢

Answer 1

您可以有一个单独的脚本来设置变量，然后让 initMap() 调用这些变量。

var latt;
var lngg;

function setCoords(latt,lngg){
  this.latt = latt;
  this.lngg = lngg;
}

function initMap() {

    var uluru = {lat: latt , lng: lngg};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

<script type ='text/javascript'>setCoords(33.225488,-111.5955)</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmjE35Pm1eDdyF6Vg3WC69opkqLIVt3GY&callback=initMap">
</script>

Answer 2

您不能向用作回调的函数添加参数。您可以在全局范围或 HTML 中添加可在回调函数中使用的变量。

例如：

<div id="mapcoords" data-lat="40" data-lng="-117" data-zoom="5"></div>

function initMap() {
  var uluru = {
    lat: parseFloat(document.getElementById('mapcoords').getAttribute("data-lat")), 
    lng: parseFloat(document.getElementById('mapcoords').getAttribute("data-lng"))
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: parseInt(document.getElementById('mapcoords').getAttribute("data-zoom")),
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

proof of concept fiddle

代码 sn-p：

function initMap() {
  var uluru = {
    lat: parseFloat(document.getElementById('mapcoords').getAttribute("data-lat")),
    lng: parseFloat(document.getElementById('mapcoords').getAttribute("data-lng"))
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: parseInt(document.getElementById('mapcoords').getAttribute("data-zoom")),
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map"></div>
<div id="mapcoords" data-lat="40" data-lng="-117" data-zoom="5"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>