Javascript 如何使用Gmap api v3使当前位置准确？_Javascript_Php_Google Maps_Currentlocation

Javascript 如何使用Gmap api v3使当前位置准确？

javascript php google-maps

Javascript 如何使用Gmap api v3使当前位置准确？,javascript,php,google-maps,currentlocation,Javascript,Php,Google Maps,Currentlocation,我制作了一些项目，用于从当前位置到数据库位置查找附近的位置。此项目使用XAMPP在localhost中运行 HTML: <body style="margin:0px; padding:0px;" onload="initMap()"> <div> <label for="raddressInput">Search location:</label> <input type="hidden" id

我制作了一些项目，用于从当前位置到数据库位置查找附近的位置。此项目使用XAMPP在localhost中运行

HTML:

 <body style="margin:0px; padding:0px;" onload="initMap()">
    <div>
         <label for="raddressInput">Search location:</label>
         <input type="hidden" id="addressInput" size="15" value="kudus" />
        <label for="radiusSelect">Radius:</label>
        <select id="radiusSelect" label="Radius">
          <option value="50" selected>50 kms</option>
          <option value="30">30 kms</option>
          <option value="20">20 kms</option>
          <option value="10">10 kms</option>
        </select>

        <input type="button" id="searchButton" value="Search"/>
    </div>
    <div><select id="locationSelect" style="width: 10%; visibility: hidden"></select></div>
    <div id="map" style="width: 100%; height: 90%"></div>


搜索位置：
半径：
50公里
30公里
20公里
10公里

Javascript

  //this code to get current location
  if(!!navigator.geolocation) {

    var map;

    var mapOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    navigator.geolocation.getCurrentPosition(function(position) {

        var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        var infowindow = new google.maps.InfoWindow({
            map: map,
            position: geolocate,
            content:"<b>Posisi Kamu Sekarang</b>"
        });
        var title = "<b>Posisi Kamu Sekarang</b>";
        var tanda = new google.maps.Marker({
        map: map,
        position: geolocate
      });
        google.maps.event.addListener(tanda, 'click', function() {
        infoWindow.setContent(title);
        infoWindow.open(map, tanda);
      });
        markers.push(tanda);
        map.setCenter(geolocate);

    });
<script async defer
    src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&key=Mykey&callback=initMap">
    </script>

//此代码用于获取当前位置
如果（！！navigator.geolocation）{
var映射；
变量映射选项={
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
navigator.geolocation.getCurrentPosition（函数（位置）{
var geologite=new google.maps.LatLng（position.coords.latitude，position.coords.longitude）；
var infowindow=new google.maps.infowindow({
地图：地图，
位置：地理定位，
内容：“Possi Kamu Sekarang”
});
var title=“Posisi Kamu Sekarang”；
var tanda=新的google.maps.Marker({
地图：地图，
位置：地理定位
});
google.maps.event.addListener（tanda，'click'，function（）{
infoWindow.setContent（标题）；
打开（地图，坦达）；
});
推（坦达）；
地图设置中心（地理定位）；
});

当我使用公共网络加载此代码时。它成功加载，标记和地图显示我在“kudus”的当前位置。但当我在家尝试时，使用我的Redmi 4x的热点连接。我的当前位置生成“三宝垄”。

如何使当前位置精确到我现在的位置？

我希望这对您有用

请提供API密钥并运行此代码

<!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
        <link href="css1/font-awesome.css" rel="stylesheet">
    <link href="http://www.wisdomproperties.com/staging/css1/bootstrap.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>

body {  margin: 0;  }
#map {   width: 100%;   height: 100%; position: relative; }
.container{ margin: 0 auto; width: 70%; height: 500px; }
.placesCont {
    position: absolute;
    top: 45px;
    z-index: 1;
    margin-left: 20px;
    padding: 15px 10px 0;
}
.placesCont ul li{ cursor:pointer; }
.placesCont ul li a {
    display: inline-block;
    width: 55px;
    height: 55px;
    background: #66af5d;
    text-align: center;
    padding: 5px 0;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 10px;
    border: 2px solid #fff;
}
.placesCont ul li:nth-child(2) a{ background:#1459d8;}
.placesCont ul li:nth-child(2) span{ background:#1459d8;}
.placesCont ul li:nth-child(3) a{  background:#bd6214;}
.placesCont ul li:nth-child(3) span{  background:#bd6214;}
.placesCont ul li:nth-child(4) a{  background:#7e8665; }
.placesCont ul li:nth-child(4) span{  background:#7e8665; }
.placesCont ul li:nth-child(5) a{ background:#936bbf; }
.placesCont ul li:nth-child(5) span{ background:#936bbf; }
.placesCont ul li:nth-child(6) a{ background:#f44336; }
.placesCont ul li:nth-child(6) span{ background:#f44336; }

.placesCont ul li a i { border: 3px solid #fff;  width: 42px; height: 42px; border-radius: 50%; padding: 10px 0; text-align: center;  margin-left: -2px; }

.placesCont ul li span {    display: inline-block;    background: #66af5d;    padding: 11px 40px;    margin-left: -29px;    border-radius: 70px;    z-index: -1;    position: relative;    width: 190px;    text-align: center;    text-transform: capitalize;  color: #fff;    top: 1px; }


    </style>

  </head>
  <body>
        <div class="container">
            <div id="map"></div>
            <div class="placesCont">
                <ul class="list-unstyled">
                    <li value="school" icon = https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png class="placeBtn" >
                        <a href="javascript:void(0);"><i class="fa fa-car active" title="parking"></i></a>
                        <span>parking</span>
                    </li>
                    <li value="restaurant" icon = http://182.156.201.194/wisdom_properties/images/icons/resturant.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-cutlery"  title="restaurant"></i></a>
                        <span>restaurant</span>
                    </li>
                    <li value="travel_agency" icon = http://182.156.201.194/wisdom_properties/images/icons/travelagncy.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-bus"  title="travel_agency"></i></a>
                        <span>travel agency</span>
                    </li>
                    <li value="hospital" icon = http://182.156.201.194/wisdom_properties/images/icons/hospital.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-heartbeat"  title="hospital"></i></a>
                        <span>hospital</span>
                    </li>
                    <li value="store" icon = http://182.156.201.194/wisdom_properties/images/icons/store.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-shopping-bag"  title="store"></i></a>
                        <span>store</span>
                    </li>
                    <li value="bank" icon = http://182.156.201.194/wisdom_properties/images/icons/bank.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-briefcase"  title="bank"></i></a>
                        <span>bank</span>
                    </li>
                </ul>
            </div>
    </div>

<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?key=Your-Kye&libraries=places&callback=initMap" async defer></script>
    <script>
        initialLocation = {lat: 13.001637, lng: 80.257942};
        map = document.getElementById('map');
        mapMarkers = [];
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        function initMap() {

          map = new google.maps.Map(map, {
            center: initialLocation,
            zoom: 15
          });

      setMarker(initialLocation, "Project Loction", "https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png");
      createRadiusCircle();

          infowindow = new google.maps.InfoWindow();
           var places = {
           restaurant:'restaurant',
           bank:'bank',
           store:'store',
           parking:'parking',
           travel_agency:'travel_agency',


          }

            var icons = {
          parking: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          },
          library: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          },
          info: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          }
        };


          getPlaces(places,icons);


                  }

    function createRadiusCircle()
    {
      var radiusCircle = new google.maps.Circle({
        strokeColor: 'white',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#64B5F6',
        fillOpacity: 0.35,
        map : map,
        center : initialLocation,
        radius : 1000
      });
    }

       function setMarker(place, placeName, icon)
       {

            var icon = {
    url: icon, // url
    scaledSize: new google.maps.Size(20, 20), 

};

          marker = new google.maps.Marker({
            icon : icon,
            map : map,
            position : place,
            zoom : 15
          });
          mapMarkers.push(marker);
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(placeName);
            infowindow.open(map, this);
          });
       }
       function clearMarkers()
       {
          for (var index = 0; index < mapMarkers.length; index++) 
          {
      if(index)
      {
        mapMarkers[index].setMap(null);
      }

          }
          mapMarkers = []
       }

       function getPlaces(place,icon)
       {
          services =  new google.maps.places.PlacesService(map);
          var object = {
            location : initialLocation,
            radius : '1000',
            type : place

          }
         var callBackFunction = function(results, status)
         {
            if (status == google.maps.places.PlacesServiceStatus.OK) 
            {
              for (var i = 0; i < results.length; i++) 
              {
                var place = results[i];
                setMarker(place.geometry.location, place.name,place.icon);
              }
            }
         };

         services.nearbySearch(object, callBackFunction);
       }


       $(document).ready(function(){
          $(".placeBtn i").off("click").on("click", function(){
          $('.active').removeClass('active');
          $(this).addClass('active');
        });



         $(".placeBtn").off("click").on("click", function(){
           clearMarkers();
           var place = $(this).attr("value");
           var icon = $(this).attr("icon");

           getPlaces(place,icon);
         });
       })

      </script>
  </body>
</html>


地点搜索
正文{页边距：0；}
#地图{宽度：100%；高度：100%；位置：相对；}
.container{边距：0自动；宽度：70%；高度：500px；}
.placesCont{
位置：绝对位置；
顶部：45px；
z指数：1；
左边距：20px；
填充：15px 10px 0；
}
.placesCont ul li{光标：指针；}
.实习医生{
显示：内联块；
宽度：55px；
高度：55px；
背景#66af5d；
文本对齐：居中；
填充：5px0；
边界半径：50%；
颜色：#fff；
边缘底部：10px；
边框：2倍实心#fff；
}
.placesCont ul li:第n个孩子（2）a{背景：#1459d8；}
.placesCont ul li:第n个孩子（2）span{背景：#1459d8；}
.placesCont ul li:第n个孩子（3）a{背景：#bd6214；}
.placesCont ul li:第n个孩子（3）span{背景：#bd6214；}
.placesCont ul li:第n个孩子（4）a{背景：#7e8665；}
.placesCont ul li:第n个孩子（4）span{背景：#7e8665；}
.placesCont ul li:第n个孩子（5）a{背景：936bbf；}
.placesCont ul li:第n个孩子（5）span{背景：936bbf；}
.placesCont ul li:第n个孩子（6）a{背景：#f44336；}
.placesCont ul li:第n个孩子（6）span{背景：#f44336；}
.placesCont ul li a i{边框：3px实心#fff；宽度：42px；高度：42px；边框半径：50%；填充：10px 0；文本对齐：中心；左边距：-2px；}
.placesCont ul li span{显示：内联块；背景：#66af5d；填充：11px 40px；左边距：-29px；边框半径：70px；z索引：-1；位置：相对；宽度：190px；文本对齐：中心；文本转换：大写；颜色：#fff；顶部：1px；}


停车


餐厅


旅行社


医院


商店


银行


初始位置={lat:13.001637，lng:80.257942}；
map=document.getElementById（'map'）；
地图标记=[]；
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
函数initMap（）{
map=新的google.maps.map（map{
中心：初始位置，
缩放：15
});
设置标记（初始位置，“项目位置”https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png");
createRadiusCircle（）；
infowindow=new google.maps.infowindow（）；
变量位置={
餐厅：'餐厅'，
银行：'银行'，
商店：'商店'，
停车：'停车'，
旅行社：'旅行社'，
}
变量图标={
停车场：{
图标：'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
},
图书馆：{
图标：'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
},
信息：{
图标：'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
}
};
getPlaces（pl）