我的网站上有一个用codeigniter创建的谷歌地图。现在，我想用我的sql数据库中的数据移动标记。我的数据库中的数据将被更新。我可以用biostall在地图上画记号。现在我想移动它们。
因此，我加载了所有的标记，并将它们传递到我的视图中，以便使用ajax/javascript脚本绘制它们。我没有错误，但也没有标记。。我不是ajax和javascript的专业人士，所以问题需要解决，但我无法解决。以下是我的代码。地图应每3秒更新一次。
我的控制器：
function render_maps() {
$userid = $this->uri->segment(3);
$userlevel = $this->user_model->get_user_level($userid);
if ($userlevel > 2) {
$this->load->library('googlemaps');
$this->googlemaps->initialize();
#$this->marks();
$config['zoom'] = 'auto';
$data['map'] = $this->googlemaps->create_map();
$data['markers'] = json_encode($this->user_model->get_marks());
$data['userdata'] = $this->session->userdata;
$this->load->view('header', $data);
$this->load->view('dashboard_maps', $data);
$this->load->view('wrapper', $data);
}
}
我的观点：
<head>
<?php echo $map['js']; ?>
<script type="text/javascript">
function refreshMarkers() {
$.ajax({
url: "<?php site_url('User/render_maps/'. $this->session->userdata('user_id')) ?>",
type: "POST",
data: ({value: $markers}),
dataType: "json", //retrieved Markers Lat/lng in Json, thus using this dataType
success: function(data){
//Removing already Added Markers//////////
for (var i = 0; i < $markers.length; i++) {
$markers[i].setMap(null);
}
$markers = new Array();
//////////////////////////////////////////
// Adding New Markers////////////////////
for (var i = 0, len = data.length; i < len; ++i) { // Iterating the Json Array
var d = data[i];
var lat = parseFloat(d.lat);
var lng = parseFloat(d.lng);
var myLatlng = new google.maps.LatLng(lat, lng);
var marker = {
map: map,
position: myLatlng // These are the minimal Options, you can add others too
};
createMarker(marker);
}
}
}
);
</script>
函数refreshMarkers()缺少一个闭合的}括号。还请包括所有依赖项，如jquery和其他函数。
您不必是ajax或javascript的专业人员就可以实现这一点。请确保使用浏览器控制台成功检索数据。
这里是一个普通的例子，谷歌地图JS API有多个标记，显示不同的地震位置。请尝试运行下面的代码段。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
Click Here >> <button id="earthquakes">Show Earthquakes</button>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrhmCE5YeH0r9Kkeq-v4ZXBd87UvwCOrw&callback=initMap">
</script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 4.8259171, lng: 63.3691405},
zoom: 1
});
}
function createMarker(latlng, name) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name
});
}
function displayMarkers() {
console.log('displayMarkers:'+latitd+':'+longtd+''n');
var latlng = new google.maps.LatLng(latitd, longtd);
var name = titleName;
createMarker(latlng, name);
}
var latitd;
var longtd;
var titleName;
var nowDate = new Date();
var displayDate = nowDate.toJSON().slice(0,10);
nowDate.setDate(nowDate.getDate() - 1);
var yesterDate = nowDate.toJSON().slice(0,10);
$(document).ready(function() {
$('#earthquakes').click(function() {
getQuakes();
});
function getQuakes() {
console.log('yesterDate:'+yesterDate+', displayDate:'+displayDate+''n');
$.ajax({
url: 'http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=' + yesterDate + '&endtime=' + displayDate,
dataType : 'json'
})
.done(function(data) {
console.log('data.features:'+data.features);
$.each(data.features, function(key, val) {
var coord = val.geometry.coordinates;
locationD = {
latd: coord[0],
lngd: coord[1]
};
latitd = locationD.latd;
longtd = locationD.lngd;
titleName = val.properties.title;
console.log(latitd, longtd);
console.log(titleName);
displayMarkers();
});
})
.fail(function(e){
console.log(e);
})
.always(function(){
console.log('ajax executed');
});
}
});
</script>
</body>
</html>