javascript - 标记不显示在谷歌地图 API 上

标签 javascript php mysql google-maps

我在 WordPress 上使用 PHP 和 MYSQL,以便从包含坐标的数据库中检索数据并在 Google map 上显示标记。

显示了 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();
    ?>

最佳答案

可能没有错误,因为它没有找到图标。 icon:icons[feature.type].icon,所以尝试研究一下。

很高兴我能提供帮助。

关于javascript - 标记不显示在谷歌地图 API 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42619939/

相关文章:

python - 基于投票的用户之间的相似性

javascript - 计算 SWFUpload 队列中的总文件大小

javascript - 处理动态输入组

php - 当使用 netcat 作为客户端发送文件或管道输出时,如何避免 netcat 阻塞?

Python MySQL TypeError : must be str, 不是元组

mysql - 我在插入选择时收到不正确的日期值

javascript - Win8 Metro (JS/HTML5) - 页面导航后视频不可见

javascript - HTML 表单中的 onClick JavaScript 函数

javascript - 移动粘性 block 时文档自行滚动

php - 更新查询以更新 laravel 中的两个字段