我在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>
请注明职位,而不是里面的链接代码,并指定问题是什么以及它发生在哪里。 –
@DanielB代码太长,我仍然应该将它们添加到帖子中? –
你应该添加相关的代码。您声明视图无法做什么,那么为什么包含控制器代码?如果问题出现在视图中,请将其包含并指定哪些内容无效。 –