Question

我刚刚在我的laravel应用程序中实现了一个lat。当我在地图上添加地址时，它建议一个地址，当我选择addressit返回lat-long。我只想在地图上鼠标位置上的那个lat。那怎么能这样呢。添加了所有正在选择地址的代码。

这是我的观看代码

<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>

这是地图脚本：

<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.getProjection().fromPointToLatLng(new google.maps.Point(x, y))

从叠加层中您将使用：

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

或者，您可以在mousedown上添加一个事件监听器来捕获指针位置并提取latlng：

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

谷歌地图：获取鼠标位置的经度和纬度

1 个答案: