Question

我看了许多类似的文章，可能会遗漏一些明显的东西，但我已经尝试过几乎所有东西。我或多或少地复制并粘贴了试图解决它的W3学校的代码。我在index.html上使用了一个按钮来获取用户的纬度和经度并显示它们的工作原理（这也是一个学校项目，这是其中一个要求）。然后我还需要获取用户位置的地图并显示它。我点击我的按钮，我在左上方的窗口（使用Chrome btw）提示我的位置，然后我说允许。我的coords弹出但不是地图。也没有任何东西弹出，只是一个巨大的空白区域。我将复制并粘贴我的index.html，它包含所涉及的代码以及loc.js文件。 我也有一把钥匙，我从谷歌免费获得，但没有修复它。

的index.html

<script src = "loc.js"></script>

<input type ="button" value="Get Location" onclick="getLocation(); getMap();">
<div id="spot"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEiqN2L1odkK645Il8bBVCDqatth6aZyU&callback=getMap"></script>
<div id="userMap" style="width:100%;height:400px;"></div>

loc.js

function getLocation() {
	var userSpot = document.getElementById("spot");
	//Using navigator, retrieves the users current location (works better with mobile phones)
    if (navigator.geolocation) { //If the user says no (this prompts the user if they want their location known)
								//then it'll go ahead and retrieve their location, if not prompts error message.
        navigator.geolocation.getCurrentPosition(showLocation);
    } else { 
        userSpot.innerHTML = "Geolocation is not supported by this browser type.";
    }
}

function showLocation(position) {
	var userSpot = document.getElementById("spot");
	//Retrieves latitude and longitude using this second function called in the first
    userSpot.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}

function getMap() {
	var currPosLat = position.coords.latitude; 
	var currPosLng = position.coords.longitude; 
	
	var mapOptions = { 
	center: new google.maps.LatLng(-34.397, 150.644),
	zoom:12, 
	}; 
	
	var map = new google.maps.Map(document.getElementById("userMap"), mapOptions);
}

Answer 1

在 loc.js 中的getMap（）函数中注意到您的代码存在问题

变量＆＃34;位置＆＃34;当它进入时没有定义。所以它破了。

删除以下行并再试一次 var currPosLat = position.coords.latitude; var currPosLng = position.coords.longitude;

之后我尝试运行你的代码。地图会显示出来。

修改

您好，我看到了您的评论。我已经为下面的中心制作了一个快速而简单的方法。添加了一个标记，使它看起来不错:)

<强>的index.html

<script src = "loc.js"></script> <input type ="button" value="Get Location" onclick="getLocation()"> <div id="spot"></div> <div id="userMap" style="width:400px;height:100%;"></div> <script src="http://maps.google.com/maps/api/js?key=AIzaSyDEiqN2L1odkK645Il8bBVCDqatth6aZyU&callback=initMap"></script>

<强> loc.js

function getLocation() { var userSpot = document.getElementById("spot"); //Using navigator, retrieves the users current location (works better with mobile phones) if (navigator.geolocation) { //If the user says no (this prompts the user if they want their location known) //then it'll go ahead and retrieve their location, if not prompts error message. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(currentLocation); marker = new google.maps.Marker({ position: currentLocation, map: map }); showLocation(position); }); } } else { userSpot.innerHTML = "Geolocation is not supported by this browser type."; } } function showLocation(position) { var userSpot = document.getElementById("spot"); //Retrieves latitude and longitude using this second function called in the first userSpot.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } function initMap() { var uluru = {lat: -25.363, lng: 131.044}; map = new google.maps.Map(document.getElementById('userMap'), { zoom: 4, center: uluru }); marker = new google.maps.Marker({ position: uluru, map: map }); }

参考：https://developers.google.com/maps/documentation/javascript/adding-a-google-map 如果您遇到某些问题，可以参考API的文档。希望这有帮助

Answer 2

＆＃34;位置＆＃34;未在getMap（）函数中定义，因此您可以执行此操作（请参阅下面的注释）：

首先删除输入标记中的getMap（）调用。

function showLocation(position) {
    var userSpot = document.getElementById("spot");
    // Save your coords
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    userSpot.innerHTML = "Latitude: " + lat + 
    "<br>Longitude: " + lon;
    // Pass the coords as a parameter in getMap() function
    getMap(lat, lon)
}

function getMap(lat, lon) {
    // Set the paremeters in mapOptions
    var mapOptions = { 
    center: new google.maps.LatLng(lat, lon),
    zoom:12, 
    }; 

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

希望我帮助过你。

JavaScript Google Maps API地图未显示？

2 个答案: