如何将 acf google map post lat 和 long 与 mapbox 链接？答案

【问题标题】：How can i link acf google map post lat and long with mapbox?如何将 acf google map post lat 和 long 与 mapbox 链接？
【发布时间】：2018-04-06 11:00:42
【问题描述】：

我正在寻找一种方法来使用我所有帖子的坐标？使用 acf google 地图字段） 创建？并将它们显示为 mapbox 地图中的标记？

有人已经这样做了吗？

谁能解释一下创建这个的逻辑？

【问题讨论】：

这是一个相当广泛的问题。有很多教程向您展示如何做到这一点。您是否有任何代码可以显示您已经尝试使用地图的位置？一个抽象的解释是基本上循环遍历所有帖子并将经纬度作为数据属性添加到元素中。在您的 JS 中查询所有元素，获取数据属性并将数据放入一个或多个数组中，如下所示：var markers = [ ['London Eye, London', 51.503454,-0.119562], ['Palace of Westminster, London', 51.499633,-0.124755] ];

标签： wordpress mapbox advanced-custom-fields

【解决方案1】：

这是一个相当广泛的问题。有很多教程向您展示如何做到这一点。您是否有任何代码可以显示您已经尝试使用地图的位置？

一个抽象的解释是基本上循环遍历所有帖子并将经纬度作为数据属性添加到元素：

<div class="marker" data-lat="<?php get_field('location_lat', id) ?>" data-lng="<?php get_field('location_lng', id) ?>" data-title="<?php get_field('location_title', id) ?>"></div>

在您的 JS（假设您使用 jQuery）中查询所有元素，获取数据属性并将数据放入一个或多个数组中，如下所示：

var getMarkers = $('.marker');
var markers = [];

getMarkers.each(function(index, marker) {
  markers.push([marker.data('title'), marker.data('lat'), marker.data('lng')])
});

这个变量可以反过来被地图用来循环和放置标记。见：https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

我希望这可以帮助您朝着正确的方向前进！

【讨论】：

感谢您的帮助，它为我指明了正确的方向！我终于明白了，并创建了令人惊叹的交互式地图。你可以在这里看到一个例子：virtual-trip.fr/asie/philippines。标记未显示在我的地图中，但滚动页面会将页面移动到正确的坐标。