Question

我正在尝试制作带标记的自定义地图。我已经有了自定义地图，但是当我尝试添加标记时，会产生一个空白页。

我不知道我做错了什么因为我做了我应该做的一切，除非我错过了什么。

我使用了公开的自定义图像我的正确代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" />
    <meta charset="utf-8" />
    <title>Nexoness Nation - Google Maps</title>
    <link rel="shortcut icon" href="https://maps.gstatic.com/favicon3.ico"/>
</head>

<body onload="initialize()">
       <div id="map-canvas" style="width: 100%; height: 100%"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
        var customMapTypeOptions = {
           getTileUrl: function(coord, zoom) {
                   var normalizedCoord = getNormalizedCoord(coord, zoom);
                    if (!normalizedCoord) {
                      return null;
                    }
                    var bound = Math.pow(2, zoom);
                    /*Edit this URL to where you upload your tiles...*/
                    return "http://nexonessnation.bugs3.com/tile_" + zoom + "_" + normalizedCoord.x + "-" + normalizedCoord.y + ".svg";

           },
           tileSize: new google.maps.Size(256, 256),
           isPng: true,
           maxZoom: 3,
           minZoom: 0,
           name: "Nexoness Nation"
         };

         var customMapType = new google.maps.ImageMapType(customMapTypeOptions);

            // Normalizes the coords that tiles repeat across the x axis (horizontally)
              // like the standard Google map tiles.
              function getNormalizedCoord(coord, zoom) {
                var y = coord.y;
                var x = coord.x;

                // tile range in one direction range is dependent on zoom level
                // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
                var tileRange = 8 << zoom;

                // don't repeat across y-axis (vertically)
                if (y < 0 || y >= tileRange) {
                  return null;
                }

                // repeat across x-axis
                if (x < 0 || x >= tileRange) {
                  x = (x % tileRange + tileRange) % tileRange;
                }

                return {
                  x: x,
                  y: y
                };
              }

        function initialize() {
            var myLatlng = new google.maps.LatLng(0, 0);
            var myOptions = {
              zoom: 1,
              center: myLatlng,
            mapTypeControlOptions: {
                    mapTypeIds: ["Nexoness Nation"]
                  }
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            map.mapTypes.set('Nexoness Nation', customMapType);
            map.setMapTypeId('Nexoness Nation');
          }

function addMarkers() {
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 10; i++) {
    var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      map: map_canvas
    });
  }
}


</script>

</body>
</html>

有人看到我做错了吗？

Answer 1

<div id="map-canvas" style="width: 100%; height: 100%"></div>中div（＆＃34; map-canvas ＆＃34;）的ID与您在脚本中指明的ID不匹配：map = new google.maps.Map(document.getElementById("**map_canvas**"), myOptions);

同样在您提供的jsfiddle中，您需要在左侧菜单的第二个下拉菜单中选择no wrap - <in body>而不是onLoad，因为您正在调用initialize()中的addMarkers()功能。 onLoad of the body。

更新：的确，我忘记了这些标记。首先，函数initialize()未从addMarkers调用。另外，我们不要忘记发送＆＃34;地图＆＃34;作为参数，我们可以在bounds_changed中使用它。

最后getBounds在事件{{1}}被触发后可用，我们只需要在其上添加一个监听器来获取值。

这是一个有效的jsfiddle： http://jsfiddle.net/M2RD6/4/

Google Maps v3 API标记无法使用并留下空白页面

1 个答案: