Google地图V3用户添加标记 [英] Google map V3 user adding markers

问题描述

我需要一些允许用户将自己的标记添加到我的地图的代码。是否有人有一个例子？

谢谢！

  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; 
 
 
函数initialize（）{
 var myOptions = {
 zoom：6，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
 }; 
 var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 
 
 //尝试W3C地理定位（首选）
 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）; 
}）; 
 //尝试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）; 
}）; 
 //浏览器不支持地理位置
}其他{
 browserSupportFlag = false; 
 handleNoGeolocation（browserSupportFlag）; 
} 
 
函数handleNoGeolocation（errorFlag）{
 if（errorFlag == true）{
 alert（Geolocation service failed。）; 
 initialLocation = newyork; 
} else {
 alert（您的浏览器不支持地理定位，我们已将您置于西伯利亚。）; 
 initialLocation = siberia; 
 
 
 
 $ google.maps.event.addListener（map，'click'，function（event）{
 placeMarker（event。 latLng）; 
}）; 
 
函数placeMarker（location）{
 var marker = new google.maps.Marker（{
 position：location，
 map：map 
}） ; 
 
 
 map.setCenter（location）; 
 
 $ b $ .ajax（{
 url：'myPHP'，
 data：location，
 succes：function（）{
 alert （'marker was added'）; 
}，
 error：function（）{
 alert（'marker was not added'）; 
 marker.setMap（null）; 
} 
}）; 
} 
 
< / script> 
  

解决方案

这不是一件难事：

• 在地图上设置点击事件

   google.maps.event .addListener（map，'click'，function（event）{
   placeMarker（event.latLng）; 
  }）; 




• 放置标记并对服务器进行AJAX调用以将位置保存到数据库中：
  $ b $ pre函数placeMarker（location）{
  var marker = new google.maps.Marker（{
  position：location，
  map：map
  }）;
  
  
  map.setCenter（location）;
  
  $ b $ .ajax（{
  url：'myPHP'，
  data：location，
  succes：function（）{
  alert （'marker was added'）;
  }，
  error：function（）{
  alert（'marker was not added'）;
  marker.setMap（null）;
  }
  }）;
  }

I need some code that allows users to add their own markers to my map. Does anybody have an example?

Thanks!

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>

解决方案

It's not a hard job:

• Set a click event on the map

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

• Place the marker and make an AJAX call to the server to save the location in the database:

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

这篇关于Google地图V3用户添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！