点击保存位置答案

【问题标题】：location save by click点击保存位置
【发布时间】：2020-05-21 09:10:08
【问题描述】：

我试图完成的是在我点击的位置添加一个标记，如果我点击了一个没有标记的位置，它将被标记，此外我想从一个文本框中添加一个标记从地图上的用户那里获取输入，地图将在文本框中的位置上自动打开，所有其他标记位置将保存在数据库中，之后当我打开地图时，我希望自动标记上一个位置来自数据库。

例如：https://developers.google.com/maps/documentation/javascript/adding-a-google-map

提前谢谢你，陈。

【问题讨论】：

你能贴出代码吗。

标签： javascript php

【解决方案1】：

要处理您使用的地图点击事件：

window.google.maps.event.addListener(gmap, "click", yourHandler);

其中gmap 是对您的地图实例的引用 yourHandler 是一个点击处理程序。

然后您可以在您的点击处理程序中向地图添加一个标记，如下所示：

function yourHandler (event) {

  console.log("LatLng", `${event.latLng.lat()}, ${event.latLng.lng()}`);

  var latLng = { 
      lat: event.latLng.lat(), 
      lng: event.latLng.lng()
  }

  const markerData = {
            position: latLng,
            map: gmap,
            title: "new marker",
            draggable: false            
        };

    const gmarker = new window.google.maps.Marker(markerData);
}

其中gmap 是对您的地图实例的引用。

据此，您应该能够得出其余部分，以完成您的问题，但请随时添加问题。

【讨论】：

【解决方案2】：

这是我的代码，我不明白如何在我的代码中添加此代码？

<p><button class="w3-btn w3-blue" onclick="getLocation()">Try It</button></p>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="Geolocation is not supported by this browser.";}
    }

    function showPosition(position)
    {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        mapholder=document.getElementById('mapholder')
        mapholder.style.height='100%';
        mapholder.style.width='100%';

        var myOptions={
            center:latlon,zoom:17,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            mapTypeControl:false,
            navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
        };
        var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
        var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
    }

    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML="The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="An unknown error occurred."
                break;
        }
    }
    window.google.maps.event.addListener(gmap, "click", yourHandler);
window.google.maps.event.add
</script>

【讨论】：