Google map V3 добавляет пользователя маркерами - PullRequest
6 голосов
/ 25 декабря 2010

Мне нужен код, который позволяет пользователям добавлять свои собственные маркеры на мою карту. У кого-нибудь есть пример?

Спасибо!

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;


function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
  }
}

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});

function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });


  map.setCenter(location);


  $.ajax({
     url: 'myPHP',
     data: location,
     succes: function(){
       alert('marker was added');
     },
     error: function(){
       alert('marker wasn't added');
       marker.setMap(null);
     }
  });
}

</script>

Ответы [ 2 ]

10 голосов
/ 25 декабря 2010

Это не тяжелая работа:

  • Установить событие клика на карте

    google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(event.latLng);
    });
  • Поместите маркер и выполните AJAX-вызов на сервер, чтобы сохранить местоположение в базе данных:

    function placeMarker(location) {
      var marker = new google.maps.Marker({
          position: location, 
          map: map
      });
    
    
      map.setCenter(location);
    
    
      $.ajax({
         url: 'myPHP',
         data: location,
         succes: function(){
           alert('marker was added');
         },
         error: function(){
           alert('marker wasn't added');
           marker.setMap(null);
         }
      });
    }
1 голос
/ 13 января 2011

Или, используйте MarkerManager для карт API v3 и избавьте себя от любой другой маленькой ошибки, которую вы могли бы сделать при ее реализации (например, перемещение маркеров и т. Д.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...