Question

所以我只是尝试使用google maps javascript API和他们的示例，但我无法让它工作。我的密钥对它没有任何限制，我在笔记本电脑上的XAMPP下的html文件中运行代码。我正在使用的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map 
      {
        height: 500px;
        width: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"
    async defer></script>
  </body>
</html>

我看到init函数在我尝试发出警报时运行，但我不知道为什么这不起作用。我用jsfiddle用我的密钥尝试了它，它工作正常。三江源。

Answer 1

只有一个问题：你是否在google api网址中使用了密钥？ https://maps.googleapis.com/maps/api/js?key=的的myKey ＆安培;回调= initMap

如果没有，请使用以下网址： http://maps.google.com/maps/api/js?sensor=false

Answer 2

这是我使用的代码。在运行脚本之前尝试放置贴图api？不要忘记用谷歌的合法API密钥替换MYKEY，否则它将无效。

 < script type = "text/javascript" >
      jQuery(function($) {
        // Asynchronously Load the map API
        var script = document.createElement('script');
        script.src = "http://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false&callback=initialize";
        document.body.appendChild(script);
      });

    var color = "#444"; //Set your tint color. Needs to be a hex value.

    function initialize() {
      var map;
      var bounds = new google.maps.LatLngBounds();

      var styles = []; //map style here

      var mapOptions = {
        mapTypeControlOptions: {
          mapTypeIds: ['Styled']
        },
        //            center: new google.maps.LatLng(latitude, longitude),
        //            zoom: 13,

        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        zoomControl: false,
        disableDefaultUI: true,
        mapTypeId: 'Styled',

        draggable: !("ontouchend" in document)
      };

      // Display a map on the page
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      map.setTilt(45);

      var styledMapType = new google.maps.StyledMapType(styles, {
        name: 'Styled'
      });
      map.mapTypes.set('Styled', styledMapType);

      // Multiple Markers
      var markers = [
        ['street number, postalcode city', 51.3726777, 3.4743581]
      ];

      // Display multiple markers on a map
      var infoWindow = new google.maps.InfoWindow(),
        marker, i;

      // Loop through our array of markers & place each one on the map
      for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
          animation: google.maps.Animation.DROP,
          map: map,
          icon: {
            path: fontawesome.markers.MAP_MARKER,
            scale: 0.8,
            strokeWeight: 0,
            strokeColor: '#ffca00',
            strokeOpacity: 0,
            fillColor: '#ffca00',
            fillOpacity: 1
          },
          position: position,
          title: markers[i][0]
        });

        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
          }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
      }

      // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
      var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(13);
        google.maps.event.removeListener(boundsListener);
      });

    } < /script>

基本Google地图问题

2 个答案: