将信息框添加到Google Directions

时间:2013-03-27 19:01:41

标签: javascript google-maps

我无法在点击Google地图方向添加可点击信息框。

我可以在初始化函数中使用它,但是当我通过我的xml文件添加额外的标记时,我需要让它工作。请参阅下面的完整代码。

感谢您的帮助..

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var stepDisplay;
var map;
var markersArray;
var markers = [];
var infowindow;




function initialize() {
var latlng = new google.maps.LatLng( <? echo $lat; ?> , <? echo $lon; ?> );
var rendererOptions = {
    draggable: true
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

//ADD LIST
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});




function calcRoute() {
var travelMode = 'DRIVING';
var start = $("#routeStart").val();
var via = $("#routeVia2").val();
var end = $("#routeVia").val();
var waypoints = [];
if (via != '') {
    waypoints.push({
        location: via,
        stopover: true
    });
}
var request = {
    origin: start,
    destination: end,
    waypoints: waypoints,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    travelMode: google.maps.DirectionsTravelMode[travelMode]
};


directionsService.route(request, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {            
       directionsDisplay.setDirections(response);
        var myRoute = response.routes[0];
        var txtDir = '';
        for (var i = 0; i < myRoute.legs[0].steps.length; i++) {
            txtDir += myRoute.legs[0].steps[i].path + "";
        }
        var strLAT = "" + txtDir;
        //---------------------------------------------------------     
        //SEND DATA TO URL
        var DATET = $("#DATET").val();
        var TIMET = $("#TIMET").val();
        var xmlHttp = getXMLHttp();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                HandleResponse(xmlHttp.responseText);
            }
        }
        xmlHttp.open("POST", 'MYPHPFILE', true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.send("LATLON=" + strLAT + "&getURL=" + end + "&TIMET=" + TIMET + "&DATET=" + DATET);
        //-------------------------------------------------------
        //RETURN DATA FOR PLACE MARKERS 
       var getURL = "MYXMLFILE" + end + ".xml";

       jQuery.get(getURL, function(data) {
       jQuery(data).find("marker").each(function() {
       var eachMarker = jQuery(this);
       var markerCoords = new google.maps.LatLng(
       parseFloat(eachMarker.find("Lat").text()),
       parseFloat(eachMarker.find("Lng").text())
       );
       var header  = eachMarker.find("title").text();
       var content = eachMarker.find("Content").text();
       var wxicon  = eachMarker.find("icon").text();
       //-------------------------------------------------------------------------- 
       //ADD INFO BOXES
       var contentString = "HELLO WORLD";
       var infowindow = new google.maps.InfoWindow({
       content: contentString,
       });         
       //--------------------------------------------------------------------------
        marker = new google.maps.Marker({
        position: markerCoords,
        icon: wxicon,
        map: map,
        animation: google.maps.Animation.DROP,
        title: header,
        });
        });
        });
        //--------------------------------------------------------------------------
    } else {
        //ERROR MESSAGES
        if (status == 'ZERO_RESULTS') {
            alert('No route could be found between the origin and destination.');
        } else if (status == 'INVALID_REQUEST') {
            alert('The DirectionsRequest provided was invalid.');
        } else {
            alert("There was an unknown error in your request. Requeststatus: nn" + status);
        }
    }
});
}

1 个答案:

答案 0 :(得分:0)

修正了,我将标记改为此,见下文。在http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

回答
 //ADD INFO BOX
       var contentString = "HELLO WORLD";
       var infowindow = new google.maps.InfoWindow({
       content: htmls,
       });  
       //--------------------------------------------------------------------------
        marker = new google.maps.Marker({
        position: markerCoords,
        icon: wxicon,
        map: map,
        animation: google.maps.Animation.DROP,
        title: header,
        html: htmls,
        });
        var contentString = "HELLO WORLD";
        var infowindow = new google.maps.InfoWindow({
        content: htmls,
        }); 
        google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(this.html);
        infowindow.open(map, this);
        });
        }); 
        });