我如何使用GMaps API来显示默认为用户的HTML5地理位置的可拖动引脚?

How can I use GMaps API to display a draggable pin that defaults to the user's HTML5 geolocation?

本文关键字：地理位置 HTML5 拖动 引脚 用户 GMaps 何使用 API 默认 显示      更新时间：2023-09-26

标题说明了一切，真的。我试图使用Google Maps JavaScript API来创建一个带有可拖动引脚的地图，该引脚默认为由HTML5地理定位API定义的用户当前地理位置，但我使用的代码根本不会输出任何东西。它可能是一些非常简单的东西(我是web开发的新手，善良!)，但我无法弄清楚它是什么。

这是我使用的代码:

<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:500px;width:600px;">
    <div id="gmap_canvas" style="height:500px;width:600px;"></div>
    <style>
        #gmap_canvas img {
            max-width: none!important;
            background: none!important
        }
    </style><a class="google-map-code" id="get-map-data" /></div>
<script type="text/javascript">
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
            var locmap = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        } else {
            var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);
        }
    }
    function init_map() {
        var myOptions = {
            zoom: 16,
            center: locmap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
        marker = new google.maps.Marker({
                draggable: true,
                map: map,
                position: locmap)
        });
    infowindow = new google.maps.InfoWindow({
        content: "<b>Last known location</b> "
    });
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });
    infowindow.open(map, marker);
    }
    google.maps.event.addDomListener(window, 'load', init_map);
    google.maps.event.addListener(marker, 'dragend', function(event) {
        document.getElementById("ilat").value = this.getPosition().lat();
        document.getElementById("ilong").value = this.getPosition().lng();
    });
</script>
有人能告诉我我做错了什么吗?

谢谢!

你的代码恐怕有点乱!有一些语法错误在它，所以你应该总是检查JavaScript控制台(汉堡->更多工具-> Chrome上的JavaScript控制台)在这些情况下寻求帮助。

语法错误之后，主要的问题是变量范围都错了。请参考这个整洁的版本，并在这里查看示例Google代码。

var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(locmap) {
        locmap = new google.maps.LatLng(position.coords.latitude,
          position.coords.longitude);
      },
      function() {});
  }
}
function init_map() {
  getLocation();
  var myOptions = {
    zoom: 16,
    center: locmap,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
  marker = new google.maps.Marker({
    draggable: true,
    map: map,
    position: locmap
  });
  infowindow = new google.maps.InfoWindow({
    content: "<b>Last known location</b> "
  });
  google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
  google.maps.event.addListener(marker, 'dragend', function(event) {
    document.getElementById("ilat").value = this.getPosition().lat();
    document.getElementById("ilong").value = this.getPosition().lng();
  });
}
google.maps.event.addDomListener(window, 'load', init_map);
<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div style="overflow:hidden;height:500px;width:600px;">
  <div id="gmap_canvas" style="height:500px;width:600px;"></div>
  <style>
    #gmap_canvas img {
      max-width: none!important;
      background: none!important
    }
  </style><a class="google-map-code" id="get-map-data" />
</div>

相关文章：