Question

我在我正在开发的网站上有一个部分，用户可以在其中输入他们的地址到Google Geocode Api并显示他们的家庭位置，一旦显示地图，标记就无法移动，右键点击也不会“这是什么”选项。

我实际上想要得到的以及地图视图是该地址的坐标，理想情况下能够让用户微调标记，让我们说正门入口并具有纬度和经度显示在屏幕上或输入字段内。

感谢您为我查看此内容，我对Javascript编程知之甚少，非常感谢您提供的任何帮助。

亲切的问候伊恩。

我到目前为止使用的基本代码如下：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">           </script>

<script>
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(51.915892, -0.660751);
  var mapOptions = {
    zoom: 18,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
}
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

对于右键单击功能，您必须在右键单击位置创建自己的位置。

google.maps.event.addListener(map, "rightclick", function(event) {
//your code here on right click
});

这里是您的第一个查询的答案，您希望用户通过拖动来微调标记并在输入框内获取lat，lng。

<html>
<head>
<title></title>
<script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(51.915892, -0.660751);
var mapOptions = {
  zoom: 18,
  center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        draggable: true
    });

    google.maps.event.addListener(marker,'dragend',function(event) {
            document.getElementById('lat').value = event.latLng.lat();
            document.getElementById('lng').value = event.latLng.lng();
        });

  } else {
    alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#map-canvas {
  width: 1000px;
  height: 500px;
}
</style><div id="map-canvas"></div>
<input type="text" id="address" placeholder="type your address here"/>
<button onclick="codeAddress()">Show on map</button>
<br>
<br>
<input type="text" id="lat" />
<br>
<input type="text" id="lng" />
</body>
</html>

使用API在我的网站Google-Map上显示搜索地址的纬度和经度

1 个答案:

使用API​​在我的网站Google-Map上显示搜索地址的纬度和经度

1 个答案:

使用API在我的网站Google-Map上显示搜索地址的纬度和经度