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

如果您还有一些问题，请告诉我。

我希望我能提供帮助。

地图标记未显示（Javascript Google Maps API）

1 个答案: