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

js:

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

update:

更新:

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

This is my code to show marker on given address,it is showing the marker on the given address on button click.I want it to happen on page load.The marker should show the given address on page load,without button click.How to do this.

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

1 个解决方案

#1

You are calling the codeAddress function on the click event of the button. Instead you should call the codeAddress function from initialize function which is called onload.

您在按钮的单击事件上调用codeAddress函数。相反，您应该从名为onload的initialize函数中调用codeAddress函数。

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

I am not sure if it will be called when it is declared inside $(document).ready. You could either move it out as a standalone function or the other alternate would be to just remove it out of the method i.e.

我不确定在$(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);
       });

This way the code will execute directly when $(document).ready is called.

这样，当$(文档)时，代码将直接执行。准备好了。