谷歌地图在地址上显示标记

Question

js:

     function initialize() {
        $('#refreshmap').on('click', initialize);
        var location_latitude = $("#id_location_latitude").val()
        var location_longitude = $("#id_location_longitude").val()
    """"""""""""""
   some code here
    """""""""""""
      $(document).ready(function(){
            function codeAddress() {
            var address = "{{ userprofile.work_street }},{{userprofile.work_suburb}},{{userprofile.work_postcode}},{{ userprofile.work_country }}";
            alert(address);
            geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
               });
                 } else {
                 alert('Geocode was not successful for the following reason: ' + status);
                 }
               });
              }
              $("#img-clck").click(codeAddress);
           });
         '''''''
        some code
       ''''''''''
     google.maps.event.addDomListener(window, 'load', initialize);

更新：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    var geocoder = new google.maps.Geocoder();
    function geocodePosition(pos) {
        geocoder.geocode({
            latLng: pos
        }, function(responses) {
            if (responses && responses.length > 0) {

            }
        });
    }
    function updateMarkerPosition(latLng) {
        document.getElementById('id_location_latitude').value = latLng.lat();
        document.getElementById('id_location_longitude').value = latLng.lng();
    }

    function initialize() {
        $('#refreshmap').on('click', initialize);
        var location_latitude = $("#id_location_latitude").val()
        var location_longitude = $("#id_location_longitude").val()

        if(location_latitude){
            var latLng = new google.maps.LatLng(location_latitude, location_longitude);

        }else{
            var latLng = new google.maps.LatLng(-37.813988, 144.963441);
         }
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 8,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

       $(document).ready(function(){

        var address = "{{ userprofile.work_street }},{{userprofile.work_suburb}},{{userprofile.work_postcode}},{{ userprofile.work_country }}";
        geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
           });
             $("#img-clck").hide();
             } 
           });        
       });


        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Position',
            map: map,
            draggable: true,
            visible:false
        });

        updateMarkerPosition(latLng);
        geocodePosition(latLng);
        google.maps.event.addListener(marker, 'drag', function() {

            updateMarkerPosition(marker.getPosition());
        });
        if(location_latitude){
            marker.setVisible(true);
           $("#img-clck").hide();
        }
        $('#img-clck').click(function(){
            marker.setVisible(true);
            $("#img-clck").hide();
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

这是我在给定地址上显示标记的代码，它在按钮单击时显示给定地址上的标记。我希望它在页面加载时发生。标记应在页面加载时显示给定地址，无需单击按钮.如何做到这一点。

Answer 1

您正在对按钮的单击事件调用 codeAddress 函数。相反，您应该从称为 onload 的初始化函数中调用 codeAddress 函数。

function initialize() {
    $('#refreshmap').on('click', initialize);
    var location_latitude = $("#id_location_latitude").val()
    var location_longitude = $("#id_location_longitude").val()
    codeAddress();

我不确定当它在 $(document).ready 中声明时是否会被调用。您可以将其作为独立函数移出，或者另一种替代方法是将其从方法中删除，即

$(document).ready(function(){

        var address = "{{ userprofile.work_street }},{{userprofile.work_suburb}},{{userprofile.work_postcode}},{{ userprofile.work_country }}";
        alert(address);
        geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
           });
             } else {
             alert('Geocode was not successful for the following reason: ' + status);
             }
           });

          $("#img-clck").click(codeAddress);
       });

这样代码会在调用$(document).ready时直接执行。