Question

背景：我的客户正在构建自己的WordPress网站（使用购买的功能丰富的主题），并且我正在修改子主题以实现她想要的自定义。该主题附带一个页面模板，其中包含一个顶部的全宽Google地图，它从主题选项中的单个地址集中提取其标记。它旨在用于一个主要的“联系我们”页面。

客户的业务有多个位置，她希望每个位置的页面都包含这样的地图。（示例链接如下。）似乎理想的解决方案是能够在Post中的短代码中指定地址，并且设置地图标记。

以下是主题制作地图的方式（$mapAddress是主题选项中的地址）：

    <?php
$mapAddress = ot_get_option( 'map_address' );
$mapHeight = ot_get_option( 'map_height' );
$mapContent = ot_get_option( 'map_content' );
?>
<section id="block-map-wrapper">
    <div id="block-map" class="clearfix">       
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script>
        jQuery(document).ready(function(){

        // Map Options
        var mapOptions = {
            zoom: 15,
            scrollwheel: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            mapTypeControl: true,
            scaleControl: false,
            panControl: false,

            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // The Map Object
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var address = "";
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ "address" : "<?php echo $mapAddress; ?>" }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                address = results[0].geometry.location;

                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                position: address, 
                map: map,
                clickable: true,
                animation: google.maps.Animation.DROP
                });

                var infowindow = new google.maps.InfoWindow({ content: "<?php echo $mapContent; ?>" });
                google.maps.event.addListener(marker, "click", function() {
                infowindow.open(map, marker);
                });

            }
        });

        });
        </script>

        <div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div>
    </div><!-- #block-map -->
<div class="shadow-bottom"></div>
</section><!-- #block-map-wrapper -->

Here's a test page使用我创建的自定义页面模板。现在它使用与上面相同的地图代码。（编辑：请参阅下面的更新。）

我尝试创建一个带有地址属性并将其设置为$mapAddress的短代码，但这不起作用。我相信这是因为在解析Loop时已经加载了地图。如何告诉Google地图“回来”以获取正确的地址？

我的专长在于HTML＆amp; CSS，但Javascript很容易迷惑我，所以在解释实现时请明确。

奖励：另一个目标是让位置的父页面也包含这样的地图，但有多个标记代表多个位置。在占据多个位置时，Google地图仅接受纬度/经度。我不希望我的客户关注坐标，所以我知道我可以用the geocoding service做一些事情，所以她可以输入一个地址列表（相同或类似的短代码解决方案）为我的主要问题而开发）。但我对如何做到这一点非常无能为力。

更新

根据Brett的观点，我已将测试模板更新为HTML：

    <section id="block-map-wrapper">
    <div id="block-map" class="clearfix">       
        <div id="map" class = "map" style = "width: 100%; height: <?php echo $mapHeight; ?>px"></div>
    </div><!-- #block-map -->
<div class="shadow-bottom"></div>
</section><!-- #block-map-wrapper -->

并将所有脚本添加到一个短代码中，该代码在Post的开头调用。您可以在测试页面（上面链接）看到它是如何在Post中编写脚本的，但是地图没有在#map div中呈现。有什么想法吗？

Answer 1

您需要暂停渲染地图，直到您拥有目标地址为止，因此请取整个脚本块并在短代码宏中渲染它。这样您就可以正确地从参数到短代码宏填充map_address和map_content，而不是从主题选项中填写。这里唯一有意义的主题选项是map_height。

Answer 2

jQuery块使用get id by id来找到它的目标div，因此在页面上放置JavaScript的位置并不重要。

将WordPress帖子中的地址传递到页面上其他位置的Google地图

更新

2 个答案: