Google Maps API V3中的tohere和fromhere消息窗口未定义

Question

我的网站上加载了地图（我不是Java编码器，这是我在互联网上找到的代码）。 我主要想出了如何使它满足我的需求的方法。 但是，当您单击“到此处”或“从这里”链接时，而不是从其上方的标记中填充地址时，在消息窗口中显示为未定义。 我敢肯定，这很简单，我很想念，但是可以提供任何帮助

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = [];
var htmls = [];

// arrays to hold variants of the info window html with get direction forms open
var to_htmls = [];
var from_htmls = [];

// global "map" variable
var map = null;

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});


function initialize() {

    var location = new google.maps.LatLng(33.3440017700195, -111.96068572998);

    var mapOptions = {
        center: location,
        zoom: 14,
        scrollwheel: true
    };

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

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("map"));
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    var image = {
        url: 'http://maps.google.com/mapfiles/ms/micons/green.png'
    };
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(33.34396, -111.960606),
        map: map,
        animation: google.maps.Animation.DROP,
        icon: image,
        Title: 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284'
    });

    var i = gmarkers.length;
    latlng = location;

    // The info window version with the "to here" form open
    to_htmls[i] = html +
        '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
        '<br>Start address:<form action="javascript:getDirections()">' +
        '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
        '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' +
        'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
        '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() +
        '"/>';
    // The info window version with the "from here" form open
    from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
        '<br>End address:<form action="javascript:getDirections()">' +
        '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
        '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
        'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
        '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() +
        '"/>';
    // The inactive version of the direction info
    var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>';
    var contentString = html;

    google.maps.event.addListener(marker, 'click', function() {
        map.setZoom(15);
        map.setCenter(marker.getPosition());
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    htmls[i] = html;
}

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

// ===== request the directions =====
function getDirections() {
    // ==== Set up the walk and avoid highways options ====
    var request = {};
    if (document.getElementById("walk").checked) {
        request.travelMode = google.maps.DirectionsTravelMode.WALKING;
    } else {
        request.travelMode = google.maps.DirectionsTravelMode.DRIVING;
    }

    if (document.getElementById("highways").checked) {
        request.avoidHighways = true;
    }
    // ==== set the start and end locations ====
    var saddr = document.getElementById("saddr").value;
    var daddr = document.getElementById("daddr").value;

    request.origin = saddr;
    request.destination = daddr;
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else alert("Directions not found:" + status);
    });
}


// This function picks up the click and opens the corresponding info window
function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
}


// functions that open the directions forms
function tohere(i) {
    //gmarkers[i].openInfoWindowHtml(to_htmls[i]);
    infowindow.setContent(to_htmls[i]);
    infowindow.open(map, gmarkers[i]);
}

function fromhere(i) {
    //gmarkers[i].openInfoWindowHtml(from_htmls[i]);
    infowindow.setContent(from_htmls[i]);
    infowindow.open(map, gmarkers[i]);
}

Answer 1

您没有在信息窗口中定义用于HTML的第一个字段的html变量。

// The info window version with the "to here" form open
to_htmls[i] = html +
  '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
// ...
  '"/>';

那应该是您要显示的HTML，在案例或示例中，这对我有用：

html = 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284<br>';

另外，标记的title属性也有问题。 您要分配的Title属性不同（javascript是区分大小写的）。

（此外，仅供参考， MarkerOptions标题属性不支持HTML标记，因此您不应在标题字符串中包含HTML标记）

概念证明

代码段：

 var directionsDisplay = new google.maps.DirectionsRenderer(); var directionsService = new google.maps.DirectionsService(); // arrays to hold copies of the markers and html used by the side_bar // because the function closure trick doesnt work there var gmarkers = []; var htmls = []; // arrays to hold variants of the info window html with get direction forms open var to_htmls = []; var from_htmls = []; // global "map" variable var map = null; var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); function initialize() { var location = new google.maps.LatLng(33.3440017700195, -111.96068572998); var mapOptions = { center: location, zoom: 14, scrollwheel: true }; map = new google.maps.Map(document.getElementById("map"), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("map")); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); var image = { url: 'http://maps.google.com/mapfiles/ms/micons/green.png' }; var marker = new google.maps.Marker({ position: new google.maps.LatLng(33.34396, -111.960606), map: map, animation: google.maps.Animation.DROP, icon: image, Title: 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284' }); html = 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284<br>'; var i = gmarkers.length; latlng = location; // The info window version with the "to here" form open to_htmls[i] = html + '<b>To here<\\/b> - <a href="javascript:fromhere(' + i + ')">From here<\\/a>' + '<br>Start address:<form action="javascript:getDirections()">' + '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' + 'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() + '"/>'; // The info window version with the "from here" form open from_htmls[i] = html + '<a href="javascript:tohere(' + i + ')">To here<\\/a> - <b>From here<\\/b>' + '<br>End address:<form action="javascript:getDirections()">' + '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' + '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' + 'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() + '"/>'; // The inactive version of the direction info var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\\/a> - <a href="javascript:fromhere(' + i + ')">From here<\\/a>'; var contentString = html; google.maps.event.addListener(marker, 'click', function() { map.setZoom(15); map.setCenter(marker.getPosition()); infowindow.setContent(contentString); infowindow.open(map, marker); }); // save the info we need to use later for the side_bar gmarkers.push(marker); htmls[i] = html; } google.maps.event.addDomListener(window, 'load', initialize); // ===== request the directions ===== function getDirections() { // ==== Set up the walk and avoid highways options ==== var request = {}; if (document.getElementById("walk").checked) { request.travelMode = google.maps.DirectionsTravelMode.WALKING; } else { request.travelMode = google.maps.DirectionsTravelMode.DRIVING; } if (document.getElementById("highways").checked) { request.avoidHighways = true; } // ==== set the start and end locations ==== var saddr = document.getElementById("saddr").value; var daddr = document.getElementById("daddr").value; request.origin = saddr; request.destination = daddr; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else alert("Directions not found:" + status); }); } // This function picks up the click and opens the corresponding info window function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } // functions that open the directions forms function tohere(i) { //gmarkers[i].openInfoWindowHtml(to_htmls[i]); infowindow.setContent(to_htmls[i]); infowindow.open(map, gmarkers[i]); } function fromhere(i) { //gmarkers[i].openInfoWindowHtml(from_htmls[i]); infowindow.setContent(from_htmls[i]); infowindow.open(map, gmarkers[i]); } 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div> 

（请注意，由于安全限制，实际的路线请求在代码段中不起作用Blocked form submission to 'javascript:getDirections()' because the form's frame is sandboxed and the 'allow-forms' permission is not set.它确实在小提琴中起作用）