Javascript 标记不会从url json数据中显示
我有一个从api获取数据的地图,叫做police.uk。它通过在地图上拖放一个点来获取数据,并显示1英里半径范围内的犯罪情况。现在我尝试从用户那里获取邮政编码(地理编码)并加载该区域的数据。没有地理编码字段,我不会得到任何错误,但是使用地理编码服务,它无法加载url资源。 这是我的密码。问题在于功能geocodeCrimeLocation。如果有点长,我很抱歉。我只是想弄清楚我在实施什么Javascript 标记不会从url json数据中显示,javascript,jquery,json,google-maps,google-maps-api-3,Javascript,Jquery,Json,Google Maps,Google Maps Api 3,我有一个从api获取数据的地图,叫做police.uk。它通过在地图上拖放一个点来获取数据,并显示1英里半径范围内的犯罪情况。现在我尝试从用户那里获取邮政编码(地理编码)并加载该区域的数据。没有地理编码字段,我不会得到任何错误,但是使用地理编码服务,它无法加载url资源。 这是我的密码。问题在于功能geocodeCrimeLocation。如果有点长,我很抱歉。我只是想弄清楚我在实施什么 <script src="https://maps.googleapis.com/maps/a
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <!-- jQuery CDN -->
<script>
var geocoder;
var map;
var latlng;
var markers = [];
var myPositionMarker = null;;
//Initializing the map
function initialize() {
var lat = 52.629729;
var lng = -1.131592;
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
getCrimeByLocation(lat, lng);
}
function fitBoundsMap(){
//Zoom and center the map to fit the markers
//This logic could be conbined with the marker creation.
//Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(data.position);
}
map.fitBounds(bounds);
}
function addMyPositionMarker(lat, lng) {
if(myPositionMarker != null){
myPositionMarker.setMap(null); // clearing prev req position
}
myPositionMarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
draggable: true,
zIndex: 99999,
icon: 'http://i.stack.imgur.com/orZ4x.png'
});
google.maps.event.addListener(myPositionMarker,'dragend',function(event) {
getCrimeByLocation(event.latLng.lat(), event.latLng.lng());
});
}
//Calling the JSON data from the website
function getCrimeByLocation(lat, lng, date){
if(date == null){
var d = new Date();
date = d.getFullYear() + '-' + (d.getMonth()+1);
//hardcoding as of now as jan 2014 data is not there, remove when req
date = "2013-01";
}
$.getJSON( "http://data.police.uk/api/crimes-street/all-crime?lat="+lat+"&lng="+lng+"&date="+date, function( data ) {
while(markers.length > 0){
markers.pop().setMap(null);
}
//marking the requested position
addMyPositionMarker(lat, lng);
$.each( data, function( key, val ) {
//var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
map: map,
animation: google.maps.Animation.DROP,
draggable: false,
title: val.location.street.name
});
markers.push(marker); // saving markers for reference, so that we can remove them later;
});
if(markers.length > 0){
fitBoundsMap();
}
});
}
function geocodeCrimeLocation(date){
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var latitude = json.results[0].geometry.location.lat;
var longitude = json.results[0].geometry.location.lng;
if(date == null){
var d = new Date();
date = d.getFullYear() + '-' + (d.getMonth()+1);
date = "2013-01";
}
$.getJSON( "http://data.police.uk/api/crimes-street/all-crime? lat="+latitude+"&lng="+longitude+"&date="+date, function(data) {
while(markers.length > 0){
markers.pop().setMap(null);
}
//marking the requested position
addMyPositionMarker(latitude, longitude);
$.each( data, function( key, val ) {
//var myLatlng = new google.maps.LatLng(val.location.latitude, val.location.longitude);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(val.location.latitude, val.location.longitude),
map: map,
animation: google.maps.Animation.DROP,
draggable: false,
title: val.location.street.name
});
markers.push(marker); // saving markers for reference, so that we can remove them later;
});
if(markers.length > 0){
fitBoundsMap();
}
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
var地理编码器;
var映射;
var latlng;
var标记=[];
var myPositionMarker=null;;
//初始化地图
函数初始化(){
var lat=52.629729;
液化天然气风险值=-1.131592;
geocoder=新的google.maps.geocoder();
latlng=新的google.maps.latlng(lat,lng);
变量映射选项={
缩放:8,
中心:拉丁
}
map=new google.maps.map(document.getElementById(“地图画布”),mapOptions);
getCrimeByLocation(lat、lng);
}
函数fitbundsmap(){
//缩放地图并使其居中以适合标记
//这种逻辑可以与标记创建相结合。
//只是为了代码清晰而将其分开。
var bounds=new google.maps.LatLngBounds();
对于(标记中的索引){
var数据=标记[指数];
扩展(数据位置);
}
映射边界(bounds);
}
功能添加MyPositionMarker(lat、lng){
如果(myPositionMarker!=null){
myPositionMarker.setMap(null);//清除上一个请求位置
}
myPositionMarker=新建google.maps.Marker({
位置:新google.maps.LatLng(lat,lng),
地图:地图,
真的,
zIndex:99999,
图标:'http://i.stack.imgur.com/orZ4x.png'
});
google.maps.event.addListener(myPositionMarker,'dragend',函数(event){
getCrimeByLocation(event.latLng.lat(),event.latLng.lng());
});
}
//从网站调用JSON数据
函数getCrimeByLocation(lat、lng、日期){
如果(日期==null){
var d=新日期();
日期=d.getFullYear()+'-'+(d.getMonth()+1);
//截至2014年1月的硬编码数据不存在,请在需要时删除
日期=“2013-01”;
}
$.getJSON(“http://data.police.uk/api/crimes-street/all-crime?lat=“+lat+”&lng=“+lng+”&date=“+日期,功能(数据){
while(markers.length>0){
markers.pop().setMap(null);
}
//标记请求的位置
添加我的位置标记(lat、lng);
$。每个(数据、函数(键、值){
//var mylatng=new google.maps.LatLng(val.location.latitude,val.location.longitude);
var marker=new google.maps.marker({
位置:新的google.maps.LatLng(val.location.latitude,val.location.longitude),
地图:地图,
动画:google.maps.animation.DROP,
可拖动:错误,
标题:val.location.street.name
});
markers.push(marker);//保存标记以供参考,以便以后删除它们;
});
如果(markers.length>0){
fitbundsmap();
}
});
}
功能geocodeCrimeLocation(日期){
var address=document.getElementById('address')。值;
geocoder.geocode({'address':address},函数(结果,状态){
if(status==google.maps.GeocoderStatus.OK){
map.setCenter(结果[0].geometry.location);
var latitude=json.results[0].geometry.location.lat;
var longitude=json.results[0].geometry.location.lng;
如果(日期==null){
var d=新日期();
日期=d.getFullYear()+'-'+(d.getMonth()+1);
日期=“2013-01”;
}
$.getJSON(“http://data.police.uk/api/crimes-street/all-crime? lat=“+纬度+”&lng=“+经度+”&date=“+日期,函数(数据){
while(markers.length>0){
markers.pop().setMap(null);
}
//标记请求的位置
addMyPositionMarker(纬度、经度);
$。每个(数据、函数(键、值){
//var mylatng=new google.maps.LatLng(val.location.latitude,val.location.longitude);
var marker=new google.maps.marker({
位置:新的google.maps.LatLng(val.location.latitude,val.location.longitude),
地图:地图,
动画:google.maps.animation.DROP,
可拖动:错误,
标题:val.location.street.name
});
markers.push(marker);//保存标记以供参考,以便以后删除它们;
});
如果(markers.length>0){
fitbundsmap();
}
});
}否则{
警报('地理编码因以下原因未成功:'+状态);
}
});
}
HTML:
如果有人能提出解决错误的建议,我们将不胜感激。感谢这些代码行(从地理编码器获取位置):
你需要json吗?我不明白你为什么会这样做,除非我是稠密的,因为对象结果被传递到函数中,而你设置了对象的中心,我认为它在工作 您应该会在上看到明显的javascript错误
var latitude = json.results[0].geometry.location.lat;
var longitude = json.results[0].geometry.location.lng;
这应该是:
map.setCenter(results[0].geometry.location);
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
结果[0]。geometry.location是一个,您用于纬度和经度的值是否可能被视为字符串,因为它们来自JSON?当您将它们传递给新的google.maps.LatLng()时,您可能想尝试将它们包装在
parseFloat(…)
中,谢谢您的回复。你是说var
var latitude = json.results[0].geometry.location.lat;
var longitude = json.results[0].geometry.location.lng;
map.setCenter(results[0].geometry.location);
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();