码

Question

我正在使用PHP＆amp; wordpress上的MYSQL，用于从数据库中检索包含Google Map上的坐标和显示标记的数据。

显示了谷歌地图，但没有任何标记，我没有在我的PHP代码中找到错误。

码

     <?php
            /*
            Template Name: MAP2
            */

            get_header();
      ?>


    <!DOCTYPE html>
    <html>
      <head>
        <title>Custom Markers</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=*******&callback=initMap">
        </script>

CSS CODE 
========


    <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 600px;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>

   HTML code & javascript
=========================


 </head>
  <body>
    <div id="map"></div>
    <script>

     var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: new google.maps.LatLng(33.888630, 35.495480),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };

        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        }

        var features = [

PHP code
========


    <?php
              global $wpdb;
                $prependStr ="";
                foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
                   $latitude = $row->latitude;
                   $longitude = $row->longitude;
                   $info = $row->siteID;
               echo $prependStr;
           ?>
    {
        position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
        type: '<?php echo $info; ?>'
    }
    <?php
    $prependStr =",";
    }
    ?>
            ];

            for (var i = 0, feature; feature = features[i]; i++) {
              addMarker(feature);
            }
    }

             </script>


      </body>
    </html>

    <?php
    get_footer();
    ?>

Answer 1

生成位置变量。

 var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

</body>
</html>

Answer 2

可能没有错误，因为它找不到图标。 icon: icons[feature.type].icon,所以试着调查一下。

很高兴我能提供帮助。

标记不会显示在Google地图API上

码

2 个答案: