地圖無法在視圖中加載

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

來源

2015-10-06 Sangeet Shukla

請註明職位，而不是裏面的鏈接代碼，並指定問題是什麼以及它發生在哪裏。 –

@DanielB代碼太長，我仍然應該將它們添加到帖子中？ –

你應該添加相關的代碼。您聲明視圖無法做什麼，那麼爲什麼包含控制器代碼？如果問題出現在視圖中，請將其包含並指定哪些內容無效。 –

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

相關變化

舉動初始化功能經緯度之外，現在接收座標作爲參數。
初始化函數接收一個初始值

JSFiddle demo

來源

2015-10-06 17:59:38 davcs86

我製作了一個代碼，用戶在其中輸入位置或PIN碼並按照它的地圖將被加載，但地圖應該在提交按鈕之前加載，在這裏我使用BLUR FUNCTION作爲USER將從地址出來TEXTBOOX地圖應該加載，讓我試試你的代碼。 –

當我輸入PIN碼時，LON和LAT將由輸入的PIN碼計算。 –

THANKS @ davcs86.your code it works –

地圖無法在視圖中加載

回答

相關問題