Gmaps 在 AJAX 成功后添加标记

Question

页面加载时我正在初始化 Gmap。然后我想在ajax功能成功完成后刷新地图标记。谁能帮我？我怎样才能做到这一点？ 我在 Google 和 SO 上进行了很多搜索，但没有找到任何有用的信息。所以我问了一个问题。在否决问题之前，请评论您投反对票的原因？

JS：

<script>
    var map, infoBubble;

    function initialize() {
        var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
        $('#user_latitude').val(52.5167);
        $('#user_longitude').val(13.3833);

        var mapOptions = {
            zoom: 3,
            center: mapCenter,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            streetViewControl: true,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            minZoom: 3,
            scrollwheel: false
        };


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


        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        var iw = new google.maps.InfoWindow();
        var oms = new OverlappingMarkerSpiderfier(map, { 
          markersWontMove: true, 
          markersWontHide: true,
          basicFormatEvents: true
        });
        var markers = [];
        <?php foreach($pets as $pet):?>
        var markerData = { lat: <?php echo $pet['pet_lat']?>, lng: <?php echo $pet['pet_long']?>, text: '<div class="shadow-box"><h3 class="title" style="font-size:20px;"><?php if($pet["pet_cat"] == 2):?><?php echo $pet["pet_name"];?><?php else:?><?php echo "Please Help me";?><?php endif;?></h3><p class="subtitle"><?php if($pet["pet_cat"] == 2):?><?php echo $pet["english"];?><?php else:?><?php echo $pet["dog_english"];?><?php endif;?></p><div class="image"><a href="<?php echo base_url();?>index.php/Pet/view/<?php echo $pet["petid"];?>" id="listinglink" target="_blank"><img src="<?php $img = unserialize($pet["img"]); echo base_url();?>uploads/<?php echo $pet["pet_hidenum"]."/".$img[0]?>" class="img-responsive" id="centerimg"></a></div><div class="quick-info clearfix"><div class="left"><p><span class="icon" style="font-size: 12px;"><img src="<?PHP echo base_url();?>assets/images/location.png" alt=""></span><?php echo $pet["reg_postal"].",".$pet["reg_city"].",".$pet["reg_country"]?></p><?php if($pet["showtel"] == "Yes"):?><p><span class="icon"><img src="<?PHP echo base_url();?>assets/images/phone.png" alt=""></span> <?php $mobile_phone_number = unserialize($pet["mobile_phone_number"]); echo $mobile_phone_number[0];?></p><?php endif;?><?php if($pet["pet_type"] == "Lost"):?><p id="rewardon"><span class="icon"><img src="<?PHP echo base_url();?>assets/images/reward.png" alt=""></span> Reward:€ (EUR) </p><?php endif;?></div><div class="right"><p style="margin-top: 14px;"><img src="images/mini_logo.png" style="width:95px;" alt=""></p><p>37070 Days Ago</p></div></div></div>' }
            var marker = new google.maps.Marker({ position: markerData });
            marker.setIcon({
                <?php if($pet['pet_type'] == 'Found' && $pet['pet_cat'] == '1'):?>
                url: "<?php echo base_url();?>assets/img/icons/greenpin.png"
                <?php endif;?>
                <?php if($pet['pet_type'] == 'Found' && $pet['pet_cat'] == '2'):?>
                url: "<?php echo base_url();?>assets/img/icons/greenpin2.png"
                <?php endif;?>
                <?php if($pet['pet_type'] == 'Lost' && $pet['pet_cat'] == '1'):?>
                url: "<?php echo base_url();?>assets/img/icons/redpin.png"
                <?php endif;?>
                <?php if($pet['pet_type'] == 'Lost' && $pet['pet_cat'] == '2'):?>
                url: "<?php echo base_url();?>assets/img/icons/redpin2.png"
                <?php endif;?>
            })
            marker.html = markerData.text;
            google.maps.event.addListener(marker, 'spider_click', function(e) {
              iw.setContent(this.html);
              iw.open(map, this);
            });
            oms.addMarker(marker);
        <?php endforeach;?>

          window.map = map;  
          window.oms = oms; 
    }


    google.maps.event.addDomListener(window, 'load', initialize);


</script>

AJAX 功能：

$.ajax({
    method: 'POST',
    url: formurl,
    data: data,
    success: function(response){
        if(response != ''){
            res = $.parseJSON(response);
            var display = '<div class="listing-masonry" style="position: relative; height: 1815.52px;">';
            $.each(res, function(i){
                if(res[i].userid !== null){
                    if(res[i].pet_type === 'Lost'){
                        var ribbon = 'ribbon-lost';
                    }
                    else{
                        var ribbon = 'ribbon-found';
                    }
                    if(res[i].pet_type === 'Lost'){
                        var name = res[i].name;
                    }
                    else{
                        var name = 'Please help me';
                    }
                    if(res[i].pet_cat == 2){
                        var category = res[i].catbreed;
                    }
                    else{
                        var category = res[i].dogbreed;
                    }
                    display += ''; //display data refresh
                    //I want to refresh map at here. How can I do this?
                }
            });
            display += '</div>';
        }
        else{
            var display = '';
        }
        $("#js").html(display);
        $("#php").hide();
    }
})

Answer 1

在上面设置你的标记变量。然后在ajax里面成功，

marker.setPosition({ lat : '你的纬度坐标', long: '你的长坐标' })