Question

新编码所以提前道歉......我希望在我的地图上添加自定义图标标记（多个），但是甚至无法显示（地图本身显示正常）。

我的代码有什么问题？（下图）：

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>TEST</title> 
  <script src="http://maps.googleapis.com/maps/api/js?key=TEST (I have a valid key here)" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 700px; height: 500px;"></div>

  <script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: new google.maps.LatLng(53.480782, -2.2445527),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var marker = new google.maps.Marker({
    position: {lat: 53.480782, lng: -2.2445527},
    title:"TEST",
    map: map,
    icon: image
  });

  marker.setMap(map);

      google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</body>
</html>

Answer 1

您没有初始化函数，因此您的代码在呈现DOM之前执行。查看javascript控制台，您会看到错误Uncaught TypeError: Cannot read property 'offsetWidth' of null，如果您搜索SO，那么您会发现这是因为地图代码运行时<div id="map"></div>没有呈现（相关问题：{{ 3}}）。

Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

代码段

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: new google.maps.LatLng(53.480782, -2.2445527),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  var marker = new google.maps.Marker({
    position: {
      lat: 53.480782,
      lng: -2.2445527
    },
    title: "TEST",
    map: map,
    icon: image
  });

  marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google Maps API自定义图标标记将不会显示

1 个答案: