Wordpress 如何在谷歌地图API中处理同一位置的多个制造商？

我知道这个问题已经有了一些答案，但我还没有弄明白。我在WordPress中使用带有高级自定义字段的Google地图

我从ACF中提取位置，然后生成地图

但是，有些位置是相同的；因此，信息窗口只显示一个标题，其他标题则完全隐藏

如果记号笔有点裂开我就没事了

如果信息窗口可以包含同一位置所有帖子的所有标题，我也可以

有人能帮忙吗

这是当前代码：

<script src="http://www.google.com/jsapi?key=ABQIAAAArX_FiOGh9BVSA-VaKWxf3BTjV82plXfzb-h9w4F1dGZTQrT8wxSgksN4vLUdfoCX3U-gz7r_GPkm2A" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
google.load("jqueryui", "1.8.16");
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom        : 16,
    center      : new google.maps.LatLng(0, 0),
    mapTypeId   : google.maps.MapTypeId.ROADMAP
};

// create map
var map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){

    add_marker( $(this), map );

});

// center map
center_map( map );

}

// create info window outside of each - then tell that singular infowindow to swap content based on click
var infowindow = new google.maps.InfoWindow({
content     : ''
});

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{

    // show info window when marker is clicked & close other markers
    google.maps.event.addListener(marker, 'click', function() {
        //swap content of that singular infowindow
                infowindow.setContent($marker.html());
                infowindow.open(map, marker);
    });

    // close info window when map is clicked
         google.maps.event.addListener(map, 'click', function(event) {
            if (infowindow) {
                infowindow.close(); }
            });

}

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

function center_map( map ) {

// vars
var bounds = new google.maps.LatLngBounds();

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){

    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

    bounds.extend( latlng );

});

// only 1 marker?
if( map.markers.length == 1 )
{
    // set center of map
    map.setCenter( bounds.getCenter() );
    map.setZoom( 16 );
}
else
{
    // fit to bounds
    map.fitBounds( bounds );
}

}



/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/

$(document).ready(function(){

$('.acf-map').each(function(){

    render_map( $(this) );

});

    });

    })(jQuery);
    </script>

load（“jquery”，“1.7.1”）；
google.load（“jqueryui”，“1.8.16”）；
（函数（$）{
/*
*渲染映射
*
*此函数将在所选jQuery元素上呈现Google地图
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param$el（jQuery元素）
*@return不适用
*/
函数渲染映射（$el）{
//变量
var$markers=$el.find（'.marker'）；
//瓦尔斯
变量args={
缩放：16，
中心：新google.maps.LatLng（0,0），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//创建地图
var map=new google.maps.map（$el[0]，args）；
//添加标记引用
map.markers=[]；
//添加标记
$markers.each（函数（）{
添加_标记（$（此），映射）；
});
//中心地图
中心地图（地图）；
}
//在每个窗口之外创建信息窗口-然后告诉单个信息窗口根据单击交换内容
var infowindow=new google.maps.infowindow({
内容：“”
});
/*
*添加标记
*
*此功能将向选定的Google地图添加标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param$marker（jQuery元素）
*@param-map（谷歌地图对象）
*@return不适用
*/
函数add_marker（$marker，map）{
//变量
var latlng=new google.maps.latlng（$marker.attr（'data-lat'），$marker.attr（'data-lng'）；
//创建标记
var marker=new google.maps.marker({
位置：latlng，
地图：地图
});
//添加到数组
map.markers.push（marker）；
//如果标记包含HTML，则将其添加到信息窗口
如果（$marker.html（））
{
//单击标记时显示信息窗口并关闭其他标记
google.maps.event.addListener（标记'click'，函数（）{
//交换单一信息窗口的内容
setContent（$marker.html（））；
信息窗口。打开（地图、标记）；
});
//单击地图时关闭信息窗口
google.maps.event.addListener（映射，'click'，函数（事件）{
如果（信息窗口）{
infowindow.close（）；}
});
}
}
/*
*中心地图
*
*此功能将使地图居中，显示附加到此地图的所有标记
*
*@type函数
*@date 8/11/2013
*@自4.3.0以来
*
*@param-map（谷歌地图对象）
*@return不适用
*/
功能中心地图（地图）{
//瓦尔斯
var bounds=new google.maps.LatLngBounds（）；
//循环遍历所有标记并创建边界
$.each（map.markers，function（i，marker）{
var latlng=new google.maps.latlng（marker.position.lat（），marker.position.lng（））；
边界扩展（latlng）；
});
//只有一个标记？
如果（map.markers.length==1）
{
//设置地图中心
map.setCenter（bounds.getCenter（））；
map.setZoom（16）；
}
其他的
{
//合拍
映射边界（bounds）；
}
}
/*
*文件准备就绪
*
*此函数将在文档准备就绪（页面已加载）时呈现每个地图
*
*@type函数
*@date 8/11/2013
*@自5.0.0以来
*
*@param不适用
*@return不适用
*/
$（文档）.ready（函数（）{
$（'.acf map'）。每个（函数（）{
渲染_贴图（$（此））；
});
});
})（jQuery）；

对于同一位置的多个标记，我建议使用

如前所述

MarkerClusterer

是一个客户端实用程序库，它将基于网格的集群应用于标记集合。它通过迭代集合中要聚类的标记来工作，如果每个标记都在最小平方像素范围内，则将其添加到最近的簇中

示例用法和演示可以在GitHub中找到-

---

这篇文章中给出的解决方案也可能有所帮助。

对于同一位置的多个标记，我建议使用

如前所述

MarkerClusterer

是一个客户端实用程序库，它将基于网格的集群应用于标记集合。它通过迭代集合中要聚类的标记来工作，如果每个标记都在最小平方像素范围内，则将其添加到最近的簇中

示例用法和演示可以在GitHub中找到- 这篇文章中给出的解决方案也可能有所帮助