在使用Google Map API时,我希望将infoWindow应用于我的第一个标记,但它不会显示。我试过寻找一些帮助,但似乎没有任何工作。有任何想法吗?谢谢你的帮助。
function initialize() {
var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: myLatlng
}),
var infowindow = new google.maps.InfoWindow({
content: "We are based here."
});
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are based here."
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
var accessPoint2 = new google.maps.LatLng(51.840913, -3.638603),
marker2 = new google.maps.Marker({
position: accessPoint2,
map: map,
title: "Access Point 2"
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 3,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds = new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
map.setOptions(myOptions);
map.fitBounds(bounds);
new google.maps.Marker({
position: latlng,
map: map,
title: "You are here!",
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe() {
$(this).hide();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
timeout: 10000
});
} else {
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
google.maps.event.addDomListener(window, 'load', initialize);

答案 0 :(得分:0)
我发布的代码Uncaught SyntaxError: Unexpected token var
出现javascript错误。你不能在逗号分隔列表的中间用分号散布变量声明:
var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: myLatlng
}), //** comma
var infowindow = new google.maps.InfoWindow({
content: "We are based here."
}); // semicolon, terminates the line
工作代码段:
function initialize() {
var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
}),
infowindow = new google.maps.InfoWindow({
content: "We are based here."
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 3,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds = new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
map.setOptions(myOptions);
map.fitBounds(bounds);
new google.maps.Marker({
position: latlng,
map: map,
title: "You are here!",
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe() {
$(this).hide();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
timeout: 10000
});
} else {
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>