在谷歌地图API V3中的消息窗口上未定义

Undefined on tohere and fromhere message windows in google maps API V3

本文关键字:消息 窗口 未定义 谷歌地图 API V3      更新时间:2023-09-26

我的网站上加载了一个地图(我不是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]);
}

您没有定义用于信息窗口中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 title属性不支持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.,它在fiddle中起作用)