Как сделать текущее местоположение точным с помощью Gmap API v3?
Я создаю какой-то проект для поиска ближайшего местоположения от моего текущего местоположения до местоположения в моей базе данных. Этот проект выполняется на локальном хосте с использованием XAMPP.
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>
Когда я загружаю этот код, используя общедоступную сеть. загрузится успешно, маркер и карта с указанием моего текущего местоположения на «кудус». Но когда я пытаюсь у себя дома, используя соединение Hotspot от моего Redmi 4x.Мое текущее местоположение генерирует «Semarang».
Как сделать текущее местоположение точным для моего местоположения сейчас?
Решение
Надеюсь, это полезно для вас.
Пожалуйста, дайте свой 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>
Спасибо
Nachimuthu.R
Другие решения
Других решений пока нет …