我做了一些项目，从我的当前位置到我的数据库位置查找附近的位置。该项目使用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>
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>
当我使用公共网络加载此代码时。它成功加载，标记和地图显示了我在"kudus"的当前位置。但当我在家里尝试时，使用Redmi 4x的热点连接。我当前的位置生成"三宝垄"。如何使当前位置准确到我现在的位置？
我希望这对你有用。
请提供您的API-key并运行此代码。
<!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>
感谢
Nachimutu.R