要在Google地图中显示一个国家/地区,您需要使用Google Maps API。以下是一些简单的步骤来实现这个目标:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
</body>
</html>
请确保将“YOUR_API_KEY”替换为您在步骤1中生成的API密钥。
function displayCountry(country) {
var geocodingUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(country) + '&key=YOUR_API_KEY';
$.getJSON(geocodingUrl, function(data) {
var latLng = data.results[0].geometry.location;
map.setCenter(latLng);
map.setZoom(4);
new google.maps.Marker({
position: latLng,
map: map,
title: country
});
});
}
请确保将“YOUR_API_KEY”替换为您在步骤1中生成的API密钥。
displayCountry
函数显示国家/地区。例如,要显示中国,请调用displayCountry('China')
。这些步骤应该足以帮助您在Google地图中显示一个国家/地区。如果您需要更多的定制选项,请查阅Google Maps API文档(https://developers.google.com/maps/documentation/javascript/tutorial)。
领取专属 10元无门槛券
手把手带您无忧上云