Question

我正在使用codeigniter + ajax + javascript进行编程，我必须根据用户在文本框中的条目获取经度和纬度。

我已经从控制器获得了正确的响应，但是视图无法将这些经度和纬度转换为地图，即使地图未在页面上加载。

在这里你可以看到我的代码：

$(document).ready(function() {
     function submitMe(selector)
   {
       //alert(selector);
    $.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "index.php/locationcontroller/getLocation",
       data: {location:selector },
       success:function(longitude){
//           alert(selector);
        locate=longitude.split(" ");
        latlong(locate[0],locate[1],selector);
       
    }
   
});
}
 
 $('#address').blur(function(){
 var add=$('#address').val();
// alert(add);
       submitMe(add);
 });
 
 
});
function latlong(lat,long,selector)
 {
     
     alert(lat);
     alert(long);
     var selector=selector;
     var myLatlng = new google.maps.LatLng(lat,long);
     var map;
var marker;
 
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize(){
var mapOptions = {
zoom: 18,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
 
map = new google.maps.Map(document.getElementById("myMap"), mapOptions);
 
marker = new google.maps.Marker({
map: map,
position: myLatlng,
draggable: true
});
 
geocoder.geocode({'latLng': myLatlng }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#latitude,#longitude').show();
selector=results[0].formatted_address;
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
 
google.maps.event.addListener(marker, 'dragend', function() {
 
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
selector=results[0].formatted_address;
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
 
}
google.maps.event.addDomListener(window, 'load', initialize);
     
 }

#myMap {
   height: 350px;
   width: 680px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<form method="POST">
            <div id="myMap"></div>
<!--<input id="" type="text" style="width:600px;"/><br/>-->
            <input type="text" id="address" name="address" />
<input type="text" id="latitude" placeholder="Latitude"/>
<input type="text" id="longitude" placeholder="Longitude"/>
<input type="submit" name="submit">
  </form>

Answer 1

将您的javascript更改为

$(document).ready(function () {
    function submitMe(selector) {
        //alert(selector);
        $.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>" + "index.php/locationcontroller/getLocation",
            data: { location: selector },
            //success: function (longitude) {
            error: function (longitude) { // error because jsfiddle doesn't support ajax
                //alert(selector);
                longitude = "1.0001203013 12.0000001";
                locate = longitude.split(" ");
                latlong(locate[0], locate[1]);
            }
        });
    }

    $('#address').blur(function () {
        var add = $('#address').val();
        // alert(add);
        submitMe(add);
    });


});

function latlong(lat, long) {

    alert(lat);
    alert(long);
    var myLatlng = new google.maps.LatLng(lat, long);
    initialize(myLatlng);

}

// RELEVANT CHANGE: move initialize function outside of latlng, and receives the coordinates as parameter.

function initialize(myLatlng) {

    var map;
    var marker;

    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    var mapOptions = {
        zoom: 18,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    marker = new google.maps.Marker({
        map: map,
        position: myLatlng,
        draggable: true
    });

    geocoder.geocode({ 'latLng': myLatlng }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                $('#latitude,#longitude').show();
                selector = results[0].formatted_address;
                $('#latitude').val(marker.getPosition().lat());
                $('#longitude').val(marker.getPosition().lng());
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            }
        }
    });

    google.maps.event.addListener(marker, 'dragend', function () {

        geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    selector = results[0].formatted_address;
                    $('#latitude').val(marker.getPosition().lat());
                    $('#longitude').val(marker.getPosition().lng());
                    infowindow.setContent(results[0].formatted_address);
                    infowindow.open(map, marker);
                }
            }
        });
    });

}
google.maps.event.addDomListener(window, 'load', function () {
  // RELEVANT CHANGE: initialize function receives an initial value.
   var initialLatlng = new google.maps.LatLng(1.55555, 10.55555);
   initialize(initialLatlng);
});

#myMap {
   height: 350px;
   width: 680px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<form method="POST">
    <div id="myMap"></div>
    <!--<input id="" type="text" style="width:600px;"/><br/>-->
    <input type="text" id="address" name="address" />
    <input type="text" id="latitude" placeholder="Latitude"/>
    <input type="text" id="longitude" placeholder="Longitude"/>
    <input type="submit" name="submit" />
</form>

相关更改

在latlng之外移动初始化函数，现在接收到坐标作为参数。
初始化函数接收初始值

JSFiddle demo

地图无法在视图中加载

1 个答案: