Fatal编程技术网
  • javascript/
  • Javascript 如何在谷歌地图上使用“显示用户位置”；onclick"；作用

Javascript 如何在谷歌地图上使用“显示用户位置”；onclick"；作用

javascript html google-maps geolocation

Javascript 如何在谷歌地图上使用“显示用户位置”；onclick"；作用,javascript,html,google-maps,onclick,geolocation,Javascript,Html,Google Maps,Onclick,Geolocation,我正试图建立一个网站，显示一个地图，在它上面我想显示一个按钮，带你到你的当前位置。 我正在使用谷歌地图服务来提取地图，我还设法自己获取用户位置，所以所有的JavaScript似乎都可以正常工作，但是当将函数getlocation添加到代码中并尝试从HTML调用它时，它就不起作用了。我相信这可能找不到函数，我不知道为什么？ 我将在下面留下代码： <script> var map; function initialize() { var miami = new google.map

我正试图建立一个网站，显示一个地图，在它上面我想显示一个按钮，带你到你的当前位置。 我正在使用谷歌地图服务来提取地图，我还设法自己获取用户位置，所以所有的JavaScript似乎都可以正常工作，但是当将函数getlocation添加到代码中并尝试从HTML调用它时，它就不起作用了。我相信这可能找不到函数，我不知道为什么？ 我将在下面留下代码：

<script>
 var map;

function initialize() {

var miami = new google.maps.LatLng(41.85, -87.65);

  var mapOptions = {
    zoom: 4,
    center: miami,
    disableDefaultUI: true,
  }
  map = new google.maps.Map(document.getElementById('mymap'),
                                mapOptions);

  var myloc = document.getElementById("try");

  function getlocation () {
    //code

    // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
  }


function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);


}
}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>


var映射；
函数初始化（）{
var miami=新的google.maps.LatLng（41.85，-87.65）；
变量映射选项={
缩放：4，
中心：迈阿密，
disableDefaultUI:true，
}
map=new google.maps.map（document.getElementById（'mymap'），
地图选项）；
var myloc=document.getElementById（“try”）；
函数getlocation（）{
//代码
//试试HTML5地理定位
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos=新的google.maps.LatLng（position.coords.latitude，
位置坐标经度）；
var infowindow=new google.maps.infowindow({
地图：地图，
职位:pos,，
内容：“使用HTML5找到的位置。”
});
}，函数（）{
手持导航（真）；
});
}否则{
//浏览器不支持地理位置
手动定位（假）；
}
}
函数handleNogeLocation（errorFlag）{
如果（错误标志）{
var content='错误：地理位置服务失败'；
}否则{
var content='错误：您的浏览器不支持地理位置'；
}
变量选项={
地图：地图，
职位：新google.maps.LatLng（60105），
内容：内容
};
var infowindow=new google.maps.infowindow（选项）；
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
我对所有东西都使用内联样式。我对JavaScript有些陌生，所以如果你能告诉我我的错误在哪里，或者我还需要做些什么才能在JavaScript上从HTML调用一个函数来创建一个按钮。 此外，这里还有HTML按钮和map div

    <style>
  html, body, #mymap{
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  <body>
    <div id="try"><button onclick="getlocation()">Click here</button></div>
    <div id="mymap"></div>
  </body>


html，body，#mymap{
身高：100%；
边际：0px；
填充：0px
}
点击这里
如果你不明白我的问题是什么，也请评论！
这是我的第一个问题

您可以查看一些
ipgeoapi
。有些将为您提供该IP的
经度
/
纬度
，然后您可以将
经度
/
纬度
插入变量或将其作为参数放入函数调用中。请记住，
**地理数据只是粗略的**
，一些IP不会返回特定的位置/州/市/镇，因此建议对数据进行正确的验证。我在谷歌地图上看到了许多使用js获取用户位置的方法，但我不知道如何使用地图外甚至地图内的按钮调用该功能。我只是想找到一种方法来创建一个按钮，将我带到用户当前的位置。你是说我应该在我的js中添加这个按钮？虽然我不想要一个标记，但我只想让HTML上的按钮将我带到用户当前的位置。如果您可以编辑您的答案，并解释您显示的代码的作用，以及该代码为什么/如何回答问题，这将非常有帮助。代码块本身通常不是有用的答案。单击它会将您带到用户位置，并且您也会获得相关信息。只需对上述代码稍作更改：调用google.maps.event.adddomstener（…）。然后您只需将行
marker=new google…
替换为
getLocation（）
。假设您的
getLocation（）
工作正常，当用户单击地图上的任何位置时，这将触发您的函数。还有一件事，请将
getLocation（）
从
initialize
函数中取出。 
google.maps.event.addListener(map, 'click', function(event) {

    marker = new google.maps.Marker({position: event.latLng, map: map});

});