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

时间:2016-02-20 14:25:20

标签: javascript google-maps google-maps-api-3

我正在尝试为用户添加一项功能,以便在Google地图上标记他们的商店位置,然后我会获得用户标记的坐标并存储它。我该怎么办呢。

这是我当前的代码,只显示一个位置:

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());
  });
}

1 个答案:

答案 0 :(得分:0)

我会评论这个,但我不能,这很简单,你已经有一个工作代码用于在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对象上传递的每个点,并在地图上得到点。