我现在的目标是基本上在谷歌地图中用户所在的任何地方添加一个标记。API 有效，我添加的带有多边形的 KML 文件可以工作，我相信到目前为止它不会弄乱任何代码。
但是，我在代码的第 99 行有"无法读取未定义的属性'setPosition'"错误。 它可能会有一个简单的解决方案，但我自己看不到。
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8&callback=initMap" async defer>
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Protoype: Just Don't</title>
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
/* Style the buttons so that they are consistently coloured and sized */
.button {
background-color: #008CBA; /* Blue */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* Style the search box */
.search input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}
/* When the screen is less than 640px wide, stack the search field vertically instead of horizontally */
@media screen and (max-width: 640px) {
.search a, .search input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.search input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<h3>Just don't app test</h3>
<div class="search">
<input type=text placeholder="Search..">
</div>
<a href="#" button class="button" onclick="alert('Takes user to settings page')">Settings</a>
<a href="#" button class="button" onclick="alert('Allows user to create/edit account')">Account</a>
<a href="#" button class="button" onclick="alert('Allows user to add a review to an area')">Add Review</a>
<div id="map"></div>
<script>
var map, infoWindow;
function initMap() {
InfoWindow = new google.maps.InfoWindow;
var Paisley = {lat: 55.845890, lng: -4.423741};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: Paisley
});
var kmlLayer = new google.maps.KmlLayer({
url: 'https://firebasestorage.googleapis.com/v0/b/just-don-t.appspot.com/o/Project%20examples.kml?alt=media&token=65140cfc-de3a-4658-8b2b-0354f4909d38',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
;
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition (pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn't support geolocation.');
infoWindow.open(map);
}
</script>
</body>
有关如何解决它的任何提示，或者如果您在我的代码中发现另一个问题，将不胜感激。
我认为主要问题是变量名称不匹配。最初，您在创建引用时声明了InfoWindow，但此后始终引用infoWindow 。此外，函数showInContentWindow和handleLocationError无需在initMap函数中声明。
以下工作正常 - 但geoLocation让我Location found远不及佩斯利......这里的 CSS 只是测试的基本内容。
任何人都会认为佩斯利在天黑后是一个不安全的地方，从点击 KML 图层时出现的一些描述来看——当我们过去去"Club69"时，从来没有见过佩斯利的太多......
<html>
<head>
<meta charset='utf-8' />
<title>Google Maps: KML Layer</title>
<script id='gm' async defer src="//maps.google.com/maps/api/js?key=AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8&callback=initMap®ion=en-GB&language=en"></script>
<script>
var infowindow, map, Paisley, kmlLayer;
var text, pos
function initMap(){
infowindow = new google.maps.InfoWindow;
Paisley = { lat: 55.845890, lng: -4.423741 };
map = new google.maps.Map( document.getElementById('map'), {
zoom: 17,
center: Paisley
});
kmlLayer = new google.maps.KmlLayer({
url: 'https://firebasestorage.googleapis.com/v0/b/just-don-t.appspot.com/o/Project%20examples.kml?alt=media&token=65140cfc-de3a-4658-8b2b-0354f4909d38',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener( 'click', function( event ) {
text = event.featureData.description;
showInContentWindow( text );
});
if( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition( function( position ) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infowindow.setPosition( pos );
infowindow.setContent( 'Location found.' );
infowindow.open( map );
map.setCenter( pos );
console.info( 'Location found: %s, %s', pos.lat, pos.lng );
}, function() {
handleLocationError( true, infowindow, map.getCenter() );
});
} else {
handleLocationError( false, infowindow, map.getCenter() );
}
}
function showInContentWindow( text ) {
document.getElementById('content-window').innerHTML = text;
}
function handleLocationError( browserHasGeolocation, infowindow, pos ) {
infowindow.setPosition( pos );
infowindow.setContent( browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn't support geolocation.');
infowindow.open( map );
}
</script>
<style>
body{ background:white; }
#container{
width: 90%;
min-height: 90vh;
height:auto;
box-sizing:border-box;
margin: auto;
float:none;
margin:1rem auto;
background:whitesmoke;
padding:1rem;
border:1px solid gray;
display:block;
}
#map {
width: 100%;
height: 100%;
clear:none;
display:block;
z-index:1!important;
background:white;
}
</style>
</head>
<body>
<div id='container'>
<div id='map'></div>
<div id='content-window'></div>
</div>
</body>
</html>