javascript - 谷歌地图 : Get latitude and longitude on mouse position

Question

我刚刚在我的 Laravel 应用程序中实现了一个经纬度。当我在 map 上添加地址时，它会在我选择地址时建议一个地址，它会返回经纬度。我只想在 map 上的鼠标位置上显示经纬度。那么如何识别这一点呢？添加了用于选择地址的所有代码。

这是我的查看代码

<div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-md-6">
            <h3 class="text-center"></h3>
            <input id="searchInput" class="form-control" type="text" placeholder="Enter a location">
            <div class="google-map" id="map"></div>
        </div>
    </div>



    <div class="form-group"><label class="col-sm-2 control-label">Latitude </label>
    <div class="col-sm-6">
        <input type="text" readonly name="latitude" id="latitude" @if(isset($activity)) value="{{ $activity->latitude }}"  @else value="{{ old('latitude') }}" @endif class="form-control">
        @if ($errors->has('latitude'))
        <div class="text-left" style="color:red;">
            <strong>Alert !</strong> {{ $errors->first('latitude') }}
        </div>
        @endif
    </div>
    </div>


    <div class="form-group"><label class="col-sm-2 control-label">Longitude </label>
    <div class="col-sm-6">
        <input type="text" readonly name="longitude" id="longitude" @if(isset($activity)) value="{{ $activity->longitude }}"  @else value="{{ old('longitude') }}" @endif class="form-control">
        @if ($errors->has('longitude'))
        <div class="text-left" style="color:red;">
            <strong>Alert !</strong> {{ $errors->first('longitude') }}
        </div>
        @endif
    </div>
    </div>

这是 map 脚本:

<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
  center:new google.maps.LatLng(20.593684,78.96288000000004),
  zoom: 4
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
});

autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
    }
    marker.setIcon(({
        url: place.icon,    
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(35, 35)
    }));    
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
    }

    /* infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);*/

    //document.getElementById('addressTwo').value = place.formatted_address;
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();
}); } </script>

查看屏幕:

我怎样才能做到这一点？

Answer 1

有几种方法可以做到这一点，您首先需要访问 map 项目，无论是 map 对象还是叠加层。

对于 map 对象使用:

map.getProjection().fromPointToLatLng(new google.maps.Point(x, y))

从您将使用的覆盖层:

overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x, y));

或者，您可以在 mousedown 上添加事件监听器以捕获指针位置并提取经纬度:

google.maps.event.addListener(map, 'mousemove', function (event) {
    // do something with event.latLng
});