Question

我有一个具有动态位置的标记（即定期更新）。单击标记时，会显示信息窗口但是当标记位置更新时，信息窗口会自动关闭。我希望当标记位置更新时，infowindow位置也应该自动更新。如何解决这个问题。

P.S。： - infowindow包含一个可由用户编辑的表单。

问题：当用户正在编辑/填写表单并且标记位置得到更新（表单尚未提交）时，表单将关闭，用户将丢失其数据。

<script type="text/javascript">
var map;
var lat_longs = new Array();
var geocoder = null;
var infoWindow = new google.maps.InfoWindow();
var trafficLayer = null;
var weatherLayer = null;
var markers = new Array();
var poi = new Array();
var fitMap = 0;
loc_array = new Array();
totUpdateOld = new Array();
ident = 0;


function showMap() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng('-0.57128','117.202148'),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    geocoder = new google.maps.Geocoder();
    trafficLayer = new google.maps.TrafficLayer();

    weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.CELCIUS
    });

    showCarPosition(function() {
        fitMapToBounds();
    });
}

function showCarPosition(){
    if (markers.length>0){
        ident = 2;
    }
    var car_icon;
    jQuery.getJSON('<s:property value="jsonUrl"/>','', function(data) { 
        var arrayCar = data.listCar;
        for (var i = 0; i < arrayCar.length; i++) {
            var car = arrayCar[i];
            var status = "";
            var tanggal = "never";
            var car_type = (car.type != "" || car.type != null)?' ('+car.type+')':'';
            if(car.lastUpdate == null){
                car_icon = ctx + 'web/img/car_black.png';
                status = "Belum pernah kirim data";
            }else if((not_active = (currentdate - stringToDate(car.lastUpdate))/ 1000 / 60) >= 30){ //diff in minute
                car_icon = ctx + 'web/img/car_red.png';
                status = convertMinute(not_active);
            }else if((((currentdate - stringToDate(car.lastUpdate))/ 1000 / 60) >= 5) && (car.lastSpeed == 0)){ //diff in minute
                car_icon = ctx + 'web/img/car_yellow.png';
                status = "Berhenti";
            }else               
                car_icon = ctx + 'web/img/car_green.png';
            if(car.lastUpdate != null){
                var splitDate = car.lastUpdate.split("T");
                tanggal = splitDate[1]+" "+splitDate[0].split("-")[2]+"-"+bulan[parseInt(splitDate[0].split("-")[1])]+"-"+splitDate[0].split("-")[0];
            }

            var coordinate = new google.maps.LatLng(car.latitude, car.longitude);
            var windowContent =[
                  '<div class="windowcontent"><ul class="nav infowindow nav-pills nav-stacked">',
                  '<li class="active"><a href="viewcarlog?id='+car.id+'" class="viewlog">'+car.plate +car_type+' - '+ car.driverName +'</a></li>',
                  (status != null)?'<li>'+status+'</li>':'',
                  (car.phoneNumber != null)?'<li>Phone : ' + car.phoneNumber+ '</li>':'',
                  '<li>Last Temp : ' + car.lastTemp+ '</li>',
                  (parseInt(car.lastSpeed)>0)?'<li>Last Speed : ' + car.lastSpeed+ '</li>':'',
                  (car.type != "" || car.type != null)?'<li>Last Speed : ' + car.lastSpeed+ '</li>':'',
                  '<li>Last Connected : ' + tanggal+ '</li>',
                  '<li>'+((car.note != null)?car.note:'no notes')+'<li>',
                  '<div id="'+car.id+'"></div></ul>',
                  '<span id="'+car.id+'" onclick="editinfo(this, \''+car.note+'\');">Edit Note</span></div>']
                  .join('');
            if (ident == 0){
                var marker = createMarker({
                    map: map,
                    position: coordinate,
                    icon: car_icon,
                    labelContent: ((car.driverName == null)?car.plate:car.driverName)+'-'+car.lastSpeed,
                    labelAnchor: new google.maps.Point(32, 0),
                    labelClass: "unitlabel",
                    labelStyle: {opacity: 1.0}
                });
                loc_array[car.id] = i;
                bindInfoWindow(marker, 'click', windowContent);
                google.maps.event.addListener(infoWindow, 'domready', function(){ 
                    jQuery('.viewlog').click(function() {
                        jQuery.history.load(jQuery(this).attr('href'));
                        return false;
                    });
                }); 
            }else{
                if (car.totalUpdate > totUpdateOld[car.id]) {
                    var map_post = loc_array[car.id];
                    markers[map_post].setMap(null);
                    var marker = updateMarker({
                        map: map,
                        position: coordinate,
                        icon: car_icon,
                        labelContent: ((car.driverName == null)?car.plate:car.driverName)+'-'+car.lastSpeed,
                        labelAnchor: new google.maps.Point(32, 0),
                        labelClass: "unitlabel",
                        labelStyle: {opacity: 1.0}
                    }, map_post);
                    bindInfoWindow(marker, 'click', windowContent);
                    google.maps.event.addListener(infoWindow, 'domready', function(){ 
                        jQuery('.viewlog').click(function() {
                            jQuery.history.load(jQuery(this).attr('href'));
                            return false;
                        });
                    }); 
                }
            }
            totUpdateOld[car.id] = car.totalUpdate;
        }
        fitMapToBounds();
    });
    setTimeout("showCarPosition()",5000);
}

function createMarker(markerOptions) {
    var marker = new MarkerWithLabel(markerOptions);
    markers.push(marker);
    lat_longs.push(marker.getPosition());
    return marker;
}

function updateMarker(markerOptions,id) {
    var marker = new MarkerWithLabel(markerOptions);
    markers[id] = marker;
    lat_longs[id] = marker.getPosition();
    return marker;
}

function fitMapToBounds() {
    var bounds = new google.maps.LatLngBounds();
    if (fitMap == 0){
        if (lat_longs.length>0) {
            for (var i=0; i<lat_longs.length; i++) {
                bounds.extend(lat_longs[i]);
            }
            map.fitBounds(bounds);
            fitMap = 1;
        }
    }
}

function bindInfoWindow(marker, event, windowContent) {
    google.maps.event.addListener(marker, event, function() {
        infoWindow.setContent(windowContent);
        infoWindow.open(map, marker);
    });
}

jQuery(document).ready(function() {
    showMap();
});

</script>

<div id="map_canvas" class="widgettitle" style="height:540px;"></div>

Answer 1

在标记位置更改时调用此函数。

infowindow.open(map,marker);

Answer 2

在文本字段上放置一个onblur事件处理程序，调用停止重新定位。

然后当它被提交并转到新点时，重新启动它（如果需要）。

永久谷歌地图Infowindow

2 个答案: