javascript - 谷歌地图 - 具有独特信息窗口的多个标记-6ren

javascript - 谷歌地图 - 具有独特信息窗口的多个标记

转载作者：行者123 更新时间：2023-11-30 13:57:54

25

4

<分区>

我正在为我网站上的用户创建 map 。它的工作方式是我使用 PHP 和 AJAX 获取所有网站用户地址，然后我将这些值作为 JSON 传递给我的 JS，在其中我生成一个以当前用户地址为中心的谷歌地图，并为 map 上的每个用户标记一个标记。这部分目前有效，但我正在努力为每个用户生成一个独特的信息窗口。因为现在我得到所有标记的相同信息窗口，我该如何解决这个问题？

JS

jQuery(document).ready(function($){
    $.ajax({
        url: ajax_url,
        type: 'post',
        dataType: 'json',
        data: { 
            action: 'map' 
        },
        error : function(response){
            console.log(response);
        },
        success : function(response){
            var mapOptions = {
                zoom: 16,
            }

            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();

            // current user position
            geocoder.geocode({'address': response.current[0].postcode}, function(results, status){
                map.setCenter( results[0].geometry.location );

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            });

            // other users loop
            for( var i = 0; i < response.other.length; i++ ){
                var postcode = response.other[i].postcode;

                geocoder.geocode( {'address': postcode}, function(results, status){
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });

                    google.maps.event.addListener(marker, 'click', function(){
                        infowindow.close(); // Close previously opened infowindow
                        infowindow.setContent( "<div id='infowindow'>"+ postcode +"</div>");
                        infowindow.open(map, this);
                    });
                });
            }

            var map = new google.maps.Map(document.getElementById("buddy_map"), mapOptions);

            return false;
        }
    });
});

PHP

add_action('wp_ajax_nopriv_map', 'addresses');
add_action('wp_ajax_map', 'addresses');


function addresses(){
    global $current_user;

    $address_street = get_user_meta( $current_user->ID, 'shipping_address_1', true );
    $address_city = get_user_meta( $current_user->ID, 'shipping_city', true );
    $address_postcode = get_user_meta( $current_user->ID, 'shipping_postcode', true );
    $address = $address_street . ', ' . $address_city . ', ' . $address_postcode;

    $cur_user[] = array(
        "postcode" => $address
    );

    $other_users[] = array(
        "postcode" => "LS11 6NA"
    );

    $other_users[] = array(
        "postcode" => "LS11 6LY"
    );

    echo json_encode( array( "current" => $cur_user, "other" => $other_users) );

    die();
}

我知道我的 PHP 文件需要一些工作，它只是一个粗略的草稿才能首先让它工作。

25

4

0

文章推荐： ios - 根据请求调用 GLKView 渲染

文章推荐： javascript - 为什么我不能复制函数的调用方法

文章推荐： ios - 调用另一个类的函数(协议(protocol))

文章推荐： c# - 如何以格式 23 :59:59 转换日期时间

地图：leaflet基本使用
leaflet：一个开源并且对移动端友好的交互式地图 JavaScript 库中文文档： https://leafletjs.cn/reference.html 官网（英文）： ht

首页

博学

6Ren·AI

商城

javascript - 谷歌地图 - 具有独特信息窗口的多个标记