我的代码如下。 这是针对 Google 地图的，您单击地图上的某个点，它会在左侧窗格中显示单击点的信息。 我想在 Javascript 中使用纬度和经度进行其他处理。 我看到代码返回一个对象，当我通过在控制台日志中单击它打开它时，我可以看到该对象包含的数据。 我似乎无法使用 Javascript 打开该对象来从中读取数据。 我正在尝试在“警报（响应）；”附近执行此操作在我的代码中。 我在互联网上阅读了解决方案，但除了空白之外没有任何解决方案产生任何内容，而我可以通过在单击后手动查看控制台来看到大量数据。 感谢您的帮助！
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Geocoding Service</title>
<script>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
let map;
let marker;
let geocoder;
let responseDiv;
let response;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: 44.630978, lng: -86.072480 },
mapTypeControl: false,
});
geocoder = new google.maps.Geocoder();
const inputText = document.createElement("input");
inputText.type = "text";
inputText.placeholder = "Enter a location";
const submitButton = document.createElement("input");
submitButton.type = "button";
submitButton.value = "Geocode";
submitButton.classList.add("button", "button-primary");
const clearButton = document.createElement("input");
clearButton.type = "button";
clearButton.value = "Clear";
clearButton.classList.add("button", "button-secondary");
response = document.createElement("pre");
response.id = "response";
response.innerText = "";
responseDiv = document.createElement("div");
responseDiv.id = "response-container";
responseDiv.appendChild(response);
const instructionsElement = document.createElement("p");
instructionsElement.id = "instructions";
instructionsElement.innerHTML =
"<strong>Instructions</strong>: Enter an address in the textbox to geocode or click on the map to reverse geocode.";
map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputText);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(submitButton);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(clearButton);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(
instructionsElement
);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(responseDiv);
marker = new google.maps.Marker({
map,
});
map.addListener("click", (e) => {
geocode({ location: e.latLng });
});
submitButton.addEventListener("click", () =>
geocode({ address: inputText.value })
);
clearButton.addEventListener("click", () => {
clear();
});
clear();
}
function clear() {
marker.setMap(null);
}
function geocode(request) {
clear();
geocoder
.geocode(request)
.then((result) => {
const { results } = result;
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
marker.setMap(map);
response.innerText = JSON.stringify(result, null, 2);
return results;
})
.catch((e) => {
alert("Geocode was not successful for the following reason: " + e);
});
alert(response);
console.log("response =");
console.log(response);
function readPreElement() {
const preElement = document.getElementById("response"); // Replace "myPre" with the ID of your <pre> element
const textContent = preElement.textContent;
console.log("text content = " + textContent); // Output the content to the console
// You can do whatever you want with the textContent here
}
readPreElement();
// const preElement = document.getElementById("response");
// const content = preElement.textContent;
// console.log("content = " + content);
var _html = document.getElementsByTagName('pre')[0].innerHTML;
console.log("_html = " + _html);
alert("_html is type: " + typeof(_html));
alert("_html is length of: " + _html.length);
var _query = document.querySelector('pre').innerHTML;
console.log(_query);
alert("_query is type: " + typeof(_query));
alert("_query is length of: " + _query.length);
//alert(typeof(map));
//alert(response.innerText.length);
//console.log(map);
//report_it();
}
window.initMap = initMap;
</script>
<style>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/**
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
input[type="text"] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
line-height: 40px;
margin-right: 0;
min-width: 25%;
}
input[type="button"] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
height: 40px;
cursor: pointer;
margin-left: 5px;
}
input[type="button"]:hover {
background: rgb(235, 235, 235);
}
input[type="button"].button-primary {
background-color: #1a73e8;
color: white;
}
input[type="button"].button-primary:hover {
background-color: #1765cc;
}
input[type="button"].button-secondary {
background-color: white;
color: #1a73e8;
}
input[type="button"].button-secondary:hover {
background-color: #d2e3fc;
}
#response-container {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
overflow: auto;
max-height: 50%;
max-width: 90%;
background-color: rgba(255, 255, 255, 0.95);
font-size: small;
}
#instructions {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
padding: 1rem;
font-size: medium;
}
</style>
</head>
<body>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxeRjDvCOd2QP-12ayt-vg1YZ71WPcwSk&callback=initMap&v=weekly&solution_channel=GMP_CCS_geocodingservice_v2"
defer
></script>
<script src="final_NWS.js">
</script>;
<div id="profile">
temperatureString;
</div>
</body>
</html>
这里的问题是，如何从geocode函数返回的结果对象中提取纬度和经度。响应对象被设置为
标签的内部文本，但这仅用于显示目的。要以编程方式使用纬度和经度，您可以直接从结果数组中访问它。
我正在添加更新的代码：
function geocode(request) {
clear();
geocoder.geocode(request).then((result) => {
const { results } = result;
if (results.length > 0) {
const location = results[0].geometry.location;
const lat = location.lat(); // Get latitude
const lng = location.lng(); // Get longitude
// Update the map and marker
map.setCenter(location);
marker.setPosition(location);
marker.setMap(map);
// Display response in the <pre> tag
response.innerText = JSON.stringify(result, null, 2);
// Log the lat and lng for further processing
console.log("Latitude:", lat);
console.log("Longitude:", lng);
// Use lat and lng for other processing
alert(`Latitude: ${lat}, Longitude: ${lng}`);
} else {
alert("No results found!");
}
return results;
})
.catch((e) => {
alert("Geocode was not successful for the following reason: " + e);
});
}