如何获取客户当前位置图钉并显示在地图上

Question

如何获取客户位置图钉并在地图中显示。还希望当客户 pin 位置时它将插入到 Mysql 数据库中。如何使用 PHP、Mysql、Javascript 和 Html。

我想为上述问题创建小界面来执行我提到的标准。

Answer 1

如果您想在谷歌地图上显示用户位置，您将需要激活谷歌地理定位API。我希望这会对您有所帮助。

这将向用户显示纬度和经度信息。如果您不想显示纬度和经度信息，可以避免这一点。

<p id="showUserLocation"></p>

这将在地图上显示用户位置

<div id="googleMap" style="width:100%;height:400px;"></div>

并按照以下脚本操作

<script>
var showLocation = document.getElementById("showUserLocation");

document.body.onload = function(){
    getUserLocation();
};

function getUserLocation() {
    if (navigator.geolocation) {
        // you can avoid this one if you don't want to show latitude & longitude information.
        navigator.geolocation.watchPosition(showPosition);
        
        // this will draw map 
        navigator.geolocation.watchPosition(drawUserGeoMap);
    } else { 
        showLocation.innerHTML = "Geolocation is not supported by this browser.";
    }
}

// you can avoid this one if you don't want to show latitude & longitude information.   
function showPosition(position) {
    showLocation.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}

function drawUserGeoMap(position) {
    var mapProp= {
        center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
        zoom:5,
    };
    
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>