Question

我正在尝试将geoJSON文件中的标记加载到我的地图上，地图加载正常，但不断出现错误......

Uncaught ReferenceError: google is not defined

在这一行...

google.maps.event.addDomListener(window, 'load', initialize);

我已经阅读了a few其他问题，其中大部分内容涉及您需要在地图代码之前添加Google地图脚本。我已经尝试将它包含在我的脑袋中，正好在我的地图容器上方，但没有运气。地图本身实际上会加载，只有我的JSON文件中的标记没有。

HTML / JS代码

<!DOCTYPE html>
<html>
<head>
    <title>Game Industry Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel=StyleSheet href="css/style.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-defualt navbar-fixed-top">
    <a class="navbar-brand" href="#">Game Industry Map</a>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value="">
        <div class="input-group-btn">
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
        </div>
    </div>
</div>
<div class='content-container'>
    <div id="map"></div>
    <div id="company-info">
        <!--To do...-->
    </div>
</div>
<script type="text/javascript">
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 34.029602, lng: -118.452416},
            zoom: 13
        });
        map.data.loadGeoJson('data.json');
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
        type="text/javascript"></script>
</body>
<footer>Created by <a href="#">My Name</a>.</footer>
</html>

geoJSON文件

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]},
      "properties": {
        "company-logo": "images/activision.png",
        "company-name": "Activision Publishing Inc",
      }
    },

    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]},
      "properties": {
        "company-logo": "images/naughtydog.png",
        "company-name": "Naughty Dog Inc",
      }
    }
  ]
}

Answer 1

尝试在调用库的脚本之前包含Google库：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
    type="text/javascript"></script>

<script type="text/javascript">
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 34.029602, lng: -118.452416},
            zoom: 13
        });
        map.data.loadGeoJson('data.json');
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

修改

您在此处定义回调：/maps/api/js?key=API_KEY_HERE&callback=initMap

一旦谷歌地图加载了所有组件，这将调用您的initMap()方法。

但是你在这个函数之外调用google.maps.event.addDomListener(window, 'load', initialize);，因此，当google尚未加载时。

您应该尝试在addDomListener来电中加入initMap()来电！

Answer 2

你很接近，首先需要使用google.maps.event.addListerner()添加一个监听器，然后你需要使用google.maps.events.addDomListner()

将监听器添加到DOM

addListener是异步的，因此您需要使用回调来编写它。这是一个例子：

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center: myCenter,
  zoom:5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

var marker = new google.maps.Marker({
  position: myCenter,
  title:'Click to zoom'
  });

marker.setMap(map);

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

相关链接：

http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_marker_click

https://developers.google.com/maps/documentation/javascript/reference#event

https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

Answer 3

事实上，你可以写：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE"></script>

（没有回调）。 API_KEY也不是必需的。因此，在公开的Maps JavaScript API应用中，强烈建议为生产系统中使用的任何密钥添加引荐来源限制，尤其是面向公众的密钥，并且只授权应用的域，主机甚至完整文件URL。

未捕获的ReferenceError：未定义谷歌

3 个答案: