如何在WordPress的HTML中渲染短代码以实现经纬度地图展示？

我有一个包含街道地址、latitude（纬度）、longitude（经度）的地点数据库，希望在每个地点页面基于经纬度展示地图。以下是我编写的无法正常运行的代码：

<?php
$shortcode = do_shortcode('[ASL_STORE field=&quot;long&quot;]');
$content = '. $longitude .';
return $content;
?>
<?php
$shortcode = do_shortcode('[ASL_STORE field=&quot;lat&quot;]');
$content = '. $latitude .';
return $content;
?>
<iframe width=&quot;300&quot; height=&quot;220&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; src=&quot;https://www.google.com/maps/embed/v1/streetview?key=myapikey&amp;location='$latitude',$'longitude'&amp;heading=210&amp;pitch=10&amp;fov=35&quot; >
 </iframe>

我尝试过多个从论坛拼凑的代码变体，但均不符合我的需求。请问如何让shortcode（短代码）输出HTML，以适配此类场景？

1. 修正经纬度变量获取逻辑 #

原代码获取经纬度的方式错误，do_shortcode()会直接返回短代码的输出值，直接将结果赋值给变量即可，无需多余的字符串拼接或return操作：

<?php
// 获取经度
$longitude = do_shortcode('[ASL_STORE field="long"]');
// 获取纬度
$latitude = do_shortcode('[ASL_STORE field="lat"]');
?>

注意：将代码中的"替换为双引号"，PHP代码中直接使用双引号更清晰，可避免转义问题。

2. 动态生成地图iframe #

将获取到的经纬度嵌入到iframe的src属性中，注意变量拼接语法和URL参数格式（location参数为纬度,经度，无需额外引号）：

<?php
// 验证经纬度有效性，避免空值导致地图加载失败
if (!empty($latitude) && !empty($longitude)) {
    $map_src = "https://www.google.com/maps/embed/v1/streetview?key=myapikey&location={$latitude},{$longitude}&heading=210&pitch=10&fov=35";
    echo '<iframe width="300" height="220" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' . esc_url($map_src) . '"></iframe>';
} else {
    // 经纬度为空时的提示
    echo '<p>无法加载地图：缺少有效经纬度信息</p>';
}
?>

这里使用esc_url()对生成的URL进行转义，是WordPress开发的安全最佳实践，可避免XSS风险。

3. 完整整合代码 #

将两部分代码整合，最终可用代码如下：

<?php
// 获取经纬度
$longitude = do_shortcode('[ASL_STORE field="long"]');
$latitude = do_shortcode('[ASL_STORE field="lat"]');

// 生成地图iframe
if (!empty($latitude) && !empty($longitude)) {
    $map_src = "https://www.google.com/maps/embed/v1/streetview?key=myapikey&location={$latitude},{$longitude}&heading=210&pitch=10&fov=35";
    echo '<iframe width="300" height="220" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' . esc_url($map_src) . '"></iframe>';
} else {
    echo '<p>无法加载地图：缺少有效经纬度信息</p>';
}
?>

关键注意事项 #

• 短代码[ASL_STORE]的作用是直接输出对应字段的值，因此用do_shortcode()直接接收返回值即可。
• 确保你的Google Maps API密钥myapikey有效，且已启用Street View Static API权限。
• 加入空值判断可避免因经纬度缺失导致地图加载出错。

内容的提问来源于stack exchange，提问作者Anya Curry