Question

我只是按照Google地图API的说明在我的网站上放置了一张谷歌地图：https://developers.google.com/maps/documentation/javascript/adding-a-google-map

复制该示例工作正常，但我想根据WordPress中每个帖子中创建的自定义字段获取标记的位置

<div id="map"></div>
    <?php $lati = get_field( "gmapslat" ); ?>
    <?php $lat = get_field( "gmapslng" ); ?>
    <script>
        function initMap() {
            var lat = '<?php echo $lat; ?>';
            var lng = '<?php echo $lng; ?>';
            var uluru = {lat: lat, lng: lng};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>

    <script async defer
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDPGx6I2w6hzEmQNR2IrRKlFC9oUT-COvs&callback=initMap">
    </script>

</div>

当这样做时，地图只显示灰色。

Answer 1

您的PHP变量似乎存在问题。未声明此PHP变量 $ lng 。因此，您在Javascript变量 lng 中设置了未声明的PHP变量。

我也注意到了这些界限：

<?php $lati = get_field( "gmapslat" ); ?>
<?php $lat = get_field( "gmapslng" ); ?>

这个变量 $ lat 值是经度吗？如果是这样，请改用 $ lng 。为变量使用有意义的名称会很有帮助。无论编程语言如何，变量名称都必须定义其内容的确切解释。检查此博客 15 Best Practices of Variable & Method Naming 可能有所帮助。

重要说明：对每个javascript变量宽度坐标使用parseFloat（）以返回浮点数。否则，它不会起作用，你只会看到灰色地图。要了解有关parseFloat（）的定义和用法的更多信息，您可以查看 JavaScript parseFloat() Function 。

以下是使用＆＃34; -25.363,131.044＆＃34;的示例代码。作为 PHP get_field（）函数：

返回的样本坐标

<div id="map"></div>
<?php 
        function get_field($args) {
          switch ($args) {
            case 'gmapslat':
              return '-25.363';
            break;
            case 'gmapslng':
              return '131.044';
            break;  
          }
        }
      $lat = get_field('gmapslat');
      $lng = get_field('gmapslng');
?>

    <script>

      function initMap() {
        var lat = parseFloat("<?php echo $lat; ?>");
        var lng = parseFloat("<?php echo $lng; ?>");
        var myLatLng = {lat: lat , lng: lng};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

希望它可以帮助和快乐编码！

如何使用自定义字段值创建谷歌地图标记？

1 个答案: