Javascript 定位当前位置标记_Javascript_Html_Google Maps_Google Maps Api 3

Javascript 定位当前位置标记

javascript html google-maps google-maps-api-3

Javascript 定位当前位置标记,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,我的代码是通过点击按钮在谷歌地图上为用户定位当前位置标记，geocode功能将接收地址信息如何使地址采用当前位置值而不是输入值标记状态：单击并拖动标记。当前职位：最近匹配地址： //js var地理编码器； var映射； var标记；代码地址=函数（）{ geocoder=新的google.maps.geocoder（）； var address=document.getElementById（'city\u country'）。值； geocoder.geocode（{'add

我的代码是通过点击按钮在谷歌地图上为用户定位当前位置标记，geocode功能将接收地址信息

如何使地址采用当前位置值而不是输入值


标记状态：
单击并拖动标记。
当前职位：
最近匹配地址：
//js
var地理编码器；
var映射；
var标记；
代码地址=函数（）{
geocoder=新的google.maps.geocoder（）；
var address=document.getElementById（'city\u country'）。值；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map=new google.maps.map（document.getElementById（'mapCanvas'）{
缩放：16，
街景控制：错误，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
MapTypeId:[google.maps.MapTypeId.HYBRID，google.maps.MapTypeId.ROADMAP]
},
中心：结果[0].geometry.location，
mapTypeId:google.maps.mapTypeId.ROADMAP
});

要从用户处获取当前位置，您需要使用地理位置API。请参阅此处的文档：

您可以使用上面的变量pos设置为标记的位置和地图的中心，而不是像示例中那样的地理编码查询结果。这将使地图围绕用户位置而不是文本框中的地理编码位置居中

我能够使用您提供的JSFIDLE以及我自己的一些代码，以及我在上面链接的地理位置示例。我相信这就是您所寻找的（请注意，您需要将自己的API密钥放入此JSFIDLE中才能使其工作）它将地理定位用户的位置，并允许用户拖动标记并获取地址信息，就像在您的示例中一样。这还将允许用户单击地理编码按钮，并且仍然具有相同的功能：

我希望这有帮助

<body>
  <div id="panel">
      <input id="city_country" type="textbox" value="Berlin, Germany">
      <input type="button" value="Geocode" onclick="codeAddress()">
  </div>  
  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Marker status:</b>
    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
</body>


//js 

var geocoder;
var map;
var marker;

codeAddress = function () {
    geocoder = new google.maps.Geocoder();

  var address = document.getElementById('city_country').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 16,
            streetViewControl: false,
          mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
              mapTypeIds:[google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP] 
    },
    center: results[0].geometry.location,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }