javascript - map 标记不出现(Javascript Google Maps API)

Question

我正在尝试在 map 上实现标记。我可以验证 map 是否在右侧中心正确渲染并缩放，但标记未显示。

function initMap() {
  var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
  var mapOptions = {
    center: latLng,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var marker = new google.maps.Marker({
      position: latLng,
      visible: true,
      map: map
  });
}

我也尝试过使用marker.setMap(map)直接添加标记的实现:

function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
  zoom: 14,
  center: myLatlng
  mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
});

// To add the marker to the map, call setMap();
marker.setMap(map);
}

都不渲染标记。我注意到，即使我将纬度和经度的 Handlebars 值替换为数字坐标进行测试，标记仍然不会出现。任何帮助表示赞赏!

我正在 Chrome 中进行测试。

Answer 1

您需要使用此语法window.onload = function initMap()并且您没有将标记分配给 map marker.setMap(map);，请尝试这样:

window.onload = function initMap() {

  //I just put some custom LatLng to make it work
  var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);

  var mapOptions = {

                     center: LatLng,
                     zoom: 14,
                     mapTypeId: google.maps.MapTypeId.SATELLITE
                   };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var marker = new google.maps.Marker({
                                         position: LatLng,
                                         map: map
  });

  marker.setMap(map);


};

• Here你可以找到一个用此代码 + css + html 制作的工作 Plunker。

• 如果您使用一些 AngularJS 来完成此操作，请查看我对 this 的回答。 @Dorin 提出的问题。

• Window.OnLoad W3Schools Documentation

• Question Related to Window.OnLoad

如果您仍有问题，请告诉我。

希望对您有所帮助。