将 Lat/Lng 值推送到我的 Google Maps API 并在事件发生时将标记移动到该位置答案

【问题标题】：Push Lat/Lng values to my Google Maps API & move the marker to that location on event将 Lat/Lng 值推送到我的 Google Maps API 并在事件发生时将标记移动到该位置
【发布时间】：2023-08-27 17:52:02
【问题描述】：

我创建了一个脚本，允许用户单击“检测我的位置”按钮，一旦使用 HTML5 地理位置单击，将获取 lat/lng 值并将其显示在页面上。我正在使用这个网站上的 geolocation.js - http://better-geolocation-api.googlecode.com

我有一个已设置的 Google 地图 - 我想更改此设置，因此当单击“检测我的位置”按钮时，它会自动将 lat/lng 值发送到此并相应地移动标记。

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Drag &amp; Drop to Lat/Lng</title>
    <style type="text/css">
        #map { height: 500px; border: 1px solid #000; }
        #geo { height: 200px; overflow: auto; }
    </style>
</head>
<body>
<button id="getPositionButton">Get</button>
<div id="geo"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.google.com/apis/gears/gears_init.js"></script>
<script src="http://better-geolocation-api.googlecode.com/files/geolocation.js"></script>
<script src="jquery.geolocation.js"></script>

<script>
function success(position) {
    $('#geo').html(position.coords.latitude + ', ' + position.coords.longitude + '<br />' + $('#geo').html());
}

$(function() {

    function alertMyPosition(position) {
        alert("Your position is " + position.coords.latitude + ", " + position.coords.longitude);
        $('#geo').html(position.timestamp + ": " + position.coords.latitude + ", " + position.coords.longitude + "<br />" + $('#geo').html());
    }

    function noLocation(error) {
        $('#geo').text("No location info available. Error code: " + error.code);
    }

    $('#getPositionButton').bind('click', function() {
        $.geolocation.get({win: alertMyPosition, fail: noLocation});
    }); 

});
</script>

<div id="map"></div>
<p>Initial Lat/Lng : 52.5879, -1.9824</p>
<script type="text/javascript">
window.onload = function() {
    var latlng = new google.maps.LatLng(52.5879, -1.9824);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);
        var div = document.createElement('div');
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
        document.getElementsByTagName('body')[0].appendChild(div);
    });
};  
</script>

【问题讨论】：

为什么这被否决了？？

标签： javascript html google-maps google-maps-api-3 geolocation

【解决方案1】：

首先，将 marker 变量设为全局变量，以便在 onload 匿名回调函数之外访问它。

那就这样吧：

function alertMyPosition(position) {
    $('#geo').html(position.timestamp + ": " + position.coords.latitude + ", " + position.coords.longitude + "<br />" + $('#geo').html());

    marker.setPosition({lat: position.coords.latitude, lng: position.coords.longitude});
}

【讨论】：