在谷歌地图API V3中的消息窗口上未定义
Undefined on tohere and fromhere message windows in google maps API V3
我的网站上加载了一个地图(我不是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" /> 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" /> 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" /> 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" /> 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中起作用)
相关文章:
- 在弹出窗口中显示加载消息
- 如何使用 javascript 警报窗口显示验证消息
- 使用模式消息/窗口显示数据库记录
- 在chrome上显示类似于关闭窗口时的firefox的警报消息.确认消息”;离开"或“;留在这个页面上&quo
- 如何让窗口消息保持不变,直到用户单击按钮才离开页面
- 使用javascript在HTML的输出窗口中打印控制台消息
- 如何在Chrome扩展弹出窗口和内容脚本之间发送消息
- 如何在窗口位置之前显示消息 2 秒
- Php,如何打开一个小消息/表单窗口(不是新的浏览器窗口)
- 发布消息 两个具有相同来源的子窗口
- 从弹出窗口到内容脚本的 Chrome 扩展消息
- 弹出窗口关闭后如何显示成功消息
- 如何使用 window.open() 打开弹出窗口,确认消息为 Yex/No
- 如何使用 JavaScript 实现自动化登录到脚本编辑器中的消息窗口
- 如何在随机时间和随机消息对话框中显示弹出窗口
- 模式弹出窗口上的 Jquery 验证和成功消息
- 无法将消息从 Chrome 扩展程序中的弹出窗口.js发送到后台.js
- 如何在单击提交按钮时显示消息框时间接弹出新窗口
- 有没有办法在用户单击关闭窗口时创建的弹出消息时获得用户的响应
- 在谷歌地图API V3中的消息窗口上未定义