0

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

客户的企业有多个位置，她希望每个位置的页面都包含这样的地图。（下面链接的示例。）似乎理想的解决方案是能够在 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 -->

这是使用我创建的自定义页面模板的测试页面。现在它使用与上面相同的地图代码。（编辑：见下面的更新。）

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

我的专长是 HTML 和 CSS，但是 Javascript 很容易让我迷惑，所以在解释实现时请明确。

奖励：另一个目标是让位置的父页面也包括这样的地图，但有多个标记代表多个位置。获取多个位置时，Google 地图仅接受纬度/经度。我不希望我的客户关心坐标，所以我知道我可以使用地理编码服务做一些事情，这样她就可以输入地址列表（输入相同或类似的为开发的短代码解决方案）我的主要问题）。但我对如何做到这一点一无所知。

更新

根据 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 中编写脚本的，但地图并未在#mapdiv 中呈现。任何想法为什么？

4

2 回答 2

0

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

于 2013-06-29T04:17:15.260 回答
0

在获得目标地址之前，您需要阻止渲染地图，因此请使用整个脚本块并将其渲染到简码宏中。这样，您可以正确地从短代码宏的参数中填写 map_address 和 map_content，而不是从主题选项中填写。唯一在这里仍然有意义的主题选项是 map_height。

于 2013-06-27T03:39:54.990 回答