Javascript 和 Jquery：单击按钮时为 Google 地图添加标记答案

【问题标题】：Javascript and Jquery: Adding markers for Google Maps when clicking a buttonJavascript 和 Jquery：单击按钮时为 Google 地图添加标记
【发布时间】：2012-10-27 05:32:08
【问题描述】：

我正在尝试创建一个按钮，该按钮将向显示的现有谷歌地图添加标记。

function initialize()
{
    geocoder = new google.maps.Geocoder();
    codeAddress();
}



function codeAddress()
{
    var image_icon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
    var address = document.getElementById("type_location").value;

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var mapOptions = {
            zoom: 11,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: image_icon
            });

        }           

    });

}

我是新手，希望有人能帮助我。

如果我有这样的东西来显示我的地图：

$(document).ready(function() {  

var coord = $(".address").attr("data-coordinates"); //this displays lat,lng (example: 32.000,-118.000)

var geocoder;
var map;    
initialize();
$(".add_marker").click(function(){

    // this is where I should add a marker?
});

});

【问题讨论】：

是的。在其中发出警报以检查您是否单击了正确的按钮
好用吗？你有什么错误吗？我建议在 codeAddress 函数之外创建地图，因为您不需要每次用户点击时都创建新地图，对吧？

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

祝你好运！

我有一个工作示例可以完全满足您的要求：)

查看完整代码并在此处进行测试：http://jsfiddle.net/RASG/vA4eQ/
只需点击按钮“添加标记”

这里是相关代码：

var latlng = new google.maps.LatLng(42.745334, 12.738430);

function addmarker(latilongi) {
    var marker = new google.maps.Marker({
        position: latilongi,
        title: 'new marker',
        draggable: true,
        map: map
    });
    map.setCenter(marker.getPosition())
}

$('#btnaddmarker').on('click', function() {
    addmarker(latlng)
})

【讨论】：

【解决方案2】：

地图的 HTML

<div id="map" style="width:100%;height:500px" ></div>

用于加载地图和标记的javascript

function myMap() {
    var myCenter = new google.maps.LatLng(28.214461283939166,83.95801313236007);
    var map_Canvas = document.getElementById("map");
    var mapOptions = {center: myCenter, zoom: 14,mapTypeId:google.maps.MapTypeId.HYBRID};
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        document.getElementById("latitude").value = map.getCenter().lat(); 
        document.getElementById("longitude").value = map.getCenter().lng(); 
      place_Marker(map, event.latLng);

    });

  }
  var marker;
  function place_Marker(map, location) {
      if(marker){
          marker.setPosition(location);
      }else{
      marker = new google.maps.Marker({
      draggable:true,
      position: location,
      animation: google.maps.Animation.DROP,
      map: map
    });
  }

    var infowindow = new google.maps.InfoWindow({
      content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    });

    infowindow.open(map,marker);

  }

【讨论】：