Javascript 谷歌地图API v3:我在热图上显示数据时遇到问题
我是谷歌地图的新手。在我的项目中,我基本上复制了使用过的api密钥,将Javascript 谷歌地图API v3:我在热图上显示数据时遇到问题,javascript,google-maps,google-maps-api-3,coordinates,Javascript,Google Maps,Google Maps Api 3,Coordinates,我是谷歌地图的新手。在我的项目中,我基本上复制了使用过的api密钥,将taxiData替换为从后端提取的数据,该数据在中可用。从服务器端提取数据的ajax调用如下: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<c:out value="${key}"/>&sensor=false&libraries=visualization"
taxiData
替换为从后端提取的数据,该数据在中可用。从服务器端提取数据的ajax调用如下:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=<c:out value="${key}"/>&sensor=false&libraries=visualization">
</script>
<script>
var map, pointarray, heatmap;
var taxiData = [];
$(function(){
var d = "2013-08-09T05:51:15Z";
var postDate = new Date(d);
var later =new Date(postDate);
var earlier20 = new Date(later);
later.setSeconds(later.getSeconds()+ 40);
$.ajax({
url: "<spring:url value="/streamview/do/retrieve_coordinates"/>",
type: "post",
data:{
"startTime": earlier20.toISOString(),
"endTime": later.toISOString()
}
}).done(function (data) {
for(d in data){
taxiData.push(new google.maps.LatLng(parseFloat(d.lat),parseFloat(d.lng)));
}
}).fail(function () {
alert("FAILED");
}).always(function(){
});
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(8.300616,-0.922852),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('edowmis-map'),
mapOptions);
var pointArray = new google.maps.MVCArray(taxiData);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.setOptions({
gradient: heatmap.get('gradient') ? null : gradient
});
}
function changeRadius() {
heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
}
function changeOpacity() {
heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
}
google.maps.event.addDomListener(window, 'load', initialize);
var图、点阵列、热图;
var taxiData=[];
$(函数(){
var d=“2013-08-09T05:51:15Z”;
var postDate=新日期(d);
var later=新日期(后日期);
var earlier20=新日期(较晚);
later.setSeconds(later.getSeconds()+40);
$.ajax({
url:“”,
类型:“post”,
数据:{
“startTime”:最早的20.toISOString(),
“endTime”:later.toISOString()
}
}).完成(功能(数据){
对于(数据中的d){
taxiData.push(新的google.maps.LatLng(parseFloat(d.lat),parseFloat(d.lng));
}
}).fail(函数(){
警报(“失败”);
}).always(函数(){
});
函数初始化(){
变量映射选项={
缩放:7,
中心:新google.maps.LatLng(8.300616,-0.922852),
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map(document.getElementById('edowmis-map'),
地图选项);
var pointArray=new google.maps.MVCArray(taxiData);
heatmap=新建google.maps.visualization.HeatmapLayer({
数据:点阵列
});
热图.设置图(map);
}
函数toggleHeatmap(){
heatmap.setMap(heatmap.getMap()?null:map);
}
函数changeGradient(){
var梯度=[
'rgba(0,255,255,0)',
'rgba(0,255,255,1)',
'rgba(0,191,255,1)',
'rgba(0,127,255,1)',
'rgba(0,63,255,1)',
'rgba(0,0,255,1)',
"rgba(0,0223,1)",,
‘rgba(0,0191,1)’,
"rgba(0,0,159,1)",,
'rgba(0,0,127,1)',
"rgba(63,0,91,1)",,
"rgba(127,0,63,1)",,
"rgba(191,0,31,1)",,
'rgba(255,0,0,1)'
]
heatmap.setOptions({
gradient:heatmap.get('gradient')?null:gradient
});
}
函数changeRadius(){
setOptions({radius:heatmap.get('radius')?null:20});
}
函数changeOpacity(){
setOptions({opacity:heatmap.get('opacity')?null:0.2});
}
google.maps.event.addDomListener(窗口“加载”,初始化);
我不明白为什么它没有显示任何可以识别为我传递给它的数据的东西。javascript中没有错误(没有firebug错误)但我的地图只是一个简单的地图,好像从来没有向它传递过任何数据。我做错了什么?你有一个关闭的
,然后当你做var地图、pointarray、heatmap;
时,没有打开的
直接跳入JS
同样,在结尾,在
});
这可能只是这个问题的复制和粘贴错误,而不是实际代码中的错误
添加实际生成的JS代码也可能是有益的,例如,可能是lat/lng坐标的错误吗?定义
不工作
-出现JS错误,没有显示地图,地图上看不到预期的结果,等等?不,请不要出错。我看到了一个简单的地图,没有任何其他内容涉及我传递给它的数据。谢谢你的提问。我将重新制定计划,但这对我来说似乎是个时间问题。该热图数据在用于创建热图之前可用吗(AJAX调用是否返回了数据)?是的,Ajax已经返回了数据,这些数据就是我放在pastie.org中的数据。如果我的代码中没有这个脚本标记,那么你的地图可以正常工作,我想这是在写这篇文章时引入的
</script>
});