用户在谷歌地图上标记一个位置

user mark a location on google map

本文关键字：一个 位置 谷歌地图 上标 用户      更新时间：2023-09-26

我正在尝试向用户添加在谷歌地图上标记其商店位置的功能，然后我获取用户的标记坐标并将其存储。我该怎么做。

这是我当前的代码，只显示一个位置：

function initMap() {
  var myLatlng = {lat: 35.6961, lng: 51.4231};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: myLatlng
  });
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Click to zoom'
  });
  map.addListener('click', function() {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });
  marker.addListener('click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

我会对此发表评论，但我不能，这很简单，您已经有了一个用于在 Gmaps 中标记点的工作代码，只需为用户提供保存一些坐标的方法，您甚至可以在单击地图时使用 gmaps 抓取坐标。 但简单的方法是让用户输入自己的数据。 然后将数据存储在数据库中，然后您可以稍微调整一下此代码您的需求：

var mapProp = {
     //this is the starting point of the map
     center: new google.maps.LatLng(6.847811, -70.483842),
     zoom: 8,
     mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                       for (var mark in json) {
                            var lat = json[mark].estaciones_latitud;
                            var long = json[mark].estaciones_longitud;
                            var marcador = new google.maps.Marker({
                                position: new google.maps.LatLng(lat, long),
                                animation: google.maps.Animation.DROP,
                                title: json[mark].estaciones_nombre
                            });
                            marcador.setMap(map);//sets the point in map
                            google.maps.event.addListener(marcador, 'click',function () {
                                doSomething(this.internalPosition.A, this.internalPosition.F, this.title);//this listener works when you click the mark
                            });
                        }
google.maps.event.addDomListener(window, 'load', initialize);

这是一个工作代码，它抓住了我在这个 JSON 对象上传递的每个点，并在地图上 DRWAS 上传递了这些点。

相关文章：