如何在wordpress中动态自定义谷歌地图？

【问题标题】：How to dynamic custom google map in wordpress?如何在wordpress中动态自定义谷歌地图？
【发布时间】：2017-04-13 01:31:39
【问题描述】：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBm0uh_VRDYSFOnLewPnlmHrgiErw7GI6U"></script>

在 html 中：

<div id="map-canvas"></div>

进入 main.js 文件：

(function(window, mapster) {

// Map Options
var options = mapster.MAP_OPTIONS,

element = document.getElementById('map-canvas'),

// Map
map = Mapster.create(element, options);
map.zoom(18);

map.addMarker({
    lat: 37.791350,
    lng: -122.435883,
    draggable: true,
    icon: 'images/map-icon.png'

});

}(window, window.Mapster || (window.Mapster = {})));

如何在 wordpress 中动态化这种类型的谷歌地图？

【问题讨论】：

标签： wordpress google-maps dictionary

【解决方案1】：

我假设“动态”是指更改经度和纬度值的能力。您可以通过将这两个变量存储为选项来实现这一点（例如，通过在“设置”选项卡中为它们添加字段），然后在您将 main.js 脚本排入队列时将它们本地化。当您将脚本排入队列时，您可以将选项传递给它：

wp_register_script( 'mainJs', get_template_directory_uri() .'/js/main.js' );
wp_localize_script( 'mainJs', 'MapData', array(
        'lat' => get_option('googleLat'),
        'lng' => get_option('googleLng'),
    )
);
wp_enqueue_script( 'mainJs' );

然后您将能够通过您的 JavaScript 代码访问 MapData 变量，如下所示：

map.addMarker({
   lat: MapData.lat,
   lng: MapData.lng,
   draggable: true,
   icon: 'images/map-icon.png'
});

有关详细信息，请参阅wp_localize_script 文档。

【讨论】：

感谢您的有用评论。