如何使用 google 地图将位置精确定位为 html 表单输入？

Question

是否可以将 google 地图 api 集成到 html 形式中，用户可以 select 坐标形式的特定针点位置并将它们与您的表单一起提交？

我正在使用 asp.net 和 Razor 视图，但是我怀疑这会影响这个问题的答案。

我看过 https://developers.google.com/maps/documentation/javascript/tutorial，但似乎无法找到使用地图 api 作为表单输入的方法。除非我瞎了。

Answer 1

添加一个draggable marker and store the lat/lng values in hidden inputs on dragend (event docs).

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

//get marker position and store in hidden input
google.maps.event.addListener(marker, 'dragend', function (evt) {
    document.getElementById("latInput").value = evt.latLng.lat().toFixed(3);
    document.getElementById("lngInput").value = evt.latLng.lng().toFixed(3);
});

Answer 2

您可以先创建一个初始化标记的事件监听器。

   marker = new google.maps.Marker({
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      //position: new google.maps.LatLng(yourLat, yourLng),

  });

   google.maps.event.addListener(marker, 'dragend', function (event) {
        $("#yourinputlat").val(this.getPosition().lat().toFixed(6));
        $("#yourinputlng").val(this.getPosition().lng().toFixed(6));
    });

我一直在使用它从 google 地图中获取经纬度位置，然后将其插入要与 POST

一起发送的输入中

如何使用 google 地图将位置精确定位为 html 表单输入？

How to use google maps to pinpoint a location as a html form input?

html

javascript

forms

jquery

google-maps

http-post