Javascript和jquery：单击按钮时添加Google地图标记

我试图创建一个按钮，将标记添加到显示的现有谷歌地图。Javascript和jquery：单击按钮时添加Google地图标记

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

});

来源

2012-11-07 hellomello

是的。在内部发出警报，检查您是否点击了正确的按钮 – madhairsilence

那么它工作？你有什么错误吗？我建议在'codeAddress'函数之外创建地图，因为每次用户点击时都不需要创建新地图，对吧？ – Odi

你真幸运！

我有一个工作的例子，你想要做什么:)

看到完整的代码，并在这里进行测试：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) 
})

来源

2012-11-07 10:47:37 RASG

狗屎..我很幸运，谢谢！ – hellomello

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

    }

来源

2017-02-21 07:10:56

Javascript和jquery：单击按钮时添加Google地图标记

回答

相关问题