要将用户输入标记添加到网站上的Google Maps小部件,并从中获取纬度和经度数据,可以按照以下步骤进行操作:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
其中,YOUR_API_KEY
需要替换为你自己的Google Maps API密钥。
<div>
元素:<div id="map"></div>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 8
});
}
这将在地图容器中创建一个具有默认中心和缩放级别的地图。
var marker;
google.maps.event.addListener(map, 'click', function(event) {
if (marker) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
// 获取经度和纬度数据
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
// 在控制台输出经度和纬度数据
console.log('Latitude: ' + latitude);
console.log('Longitude: ' + longitude);
});
这将在用户单击地图时创建一个标记,并将其位置设置为用户单击的位置。同时,经度和纬度数据将被获取并输出到浏览器的控制台中。
至此,用户输入标记已经成功添加到网站上的Google Maps小部件,并且可以从中获取纬度和经度数据。
推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/maps)
领取专属 10元无门槛券
手把手带您无忧上云