地图标记不出现（Javascript Google Maps API）

Question

我正在尝试在地图上实现标记。我可以验证地图在正确的中心正确渲染并缩放，但标记没有显示。

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);
}

不渲染标记。我注意到，即使我用数字坐标替换纬度和经度的把手值以进行测试，标记仍然没有出现。任何帮助表示赞赏！

我正在 Chrome 中进行测试。

Answer 1

您需要使用此语法window.onload = function initMap()，并且您没有将标记分配给地图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 进行操作，请查看我对 @Dorin 的 this 问题的回答。

• Window.OnLoad W3Schools Documentation

• Question Related to Window.OnLoad

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

希望我对您有所帮助。