我有这个javascript结果:
var layer = '{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}';
我对JSONlint.com进行了检查,并被告知它是一个有效的JSON字符串。
为什么JSON.parse()
和JSON.stringify()
无效。
控制台告诉我JSON.parse()
和JSON.stringify
无法识别功能。
感谢。
确定。让我再试一次。对不起,给了不好的信息。
var polygon = new Array();
polygon.push('{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}');
var layer = polygon[0] //should be of value of string just stored
console.log(layer); //correctly displays JSON string
console.log(JSON.parse(layer)); //line that errors.
这是以下完整代码的一部分:
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
var selectedShape;
var drawingManager;
var names = [];
var polygons = new Array();
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['circle', 'polygon', 'rectangle']
},
polygonOptions: {
editable: true,
draggable: true
},
circleOptions: {
editable: true,
draggable: true
},
rectangleOptions: {
editable: true,
draggable: true
}
});
drawingManager.setMap(map);
//load preset data
function setJSON(Shape) {
console.log(Shape.type);
if (Shape.type === "circle") {
return '{"type":"'+Shape.type +'", "lat":"'+Shape.getCenter().lat()+'", "lng":"'+Shape.getCenter().lng()+'", "radius":"'+Shape.getRadius()+'" }';
}
if (Shape.type === "rectangle"){
return '{"type":"' + Shape.type + ', "start":"'+ Shape.getBounds().getNorthEast() +'", "end":"'+ Shape.getBounds().getSouthWest() +'"}';
}
if (Shape.type === "polygon"){
//eturn '{"type":"'+ Shape.type +'"}' + Shape.getPaths();
vertice = Shape.getPath();
console.log("vertice count: " + vertice.getLength());
JSON = '{"type":"'+ Shape.type +'", "coordinates": "';
vertice.forEach(function(xy, i) {
JSON = JSON + xy.lat() + ' ' + xy.lng() + ', ';
});
JSON = JSON.slice(0,-2) + '"}';
return JSON;
}
return 0
}
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
drawingManager.setMap(null);
var newShape = event.overlay;
newShape.type = event.type;
selectedShape = newShape;
console.log(setJSON(selectedShape));
if (newShape.type === "circle" || newShape.type === "rectangle") {
google.maps.event.addListener(selectedShape, 'bounds_changed', function(event){
console.log(setJSON(selectedShape));
});
}
if (newShape.type === "polygon") {
google.maps.event.addListener(selectedShape.getPath(), 'set_at', function(event) {
// complete functions
console.log(setJSON(selectedShape));
});
google.maps.event.addListener(selectedShape.getPath(), 'insert_at', function(event) {
// complete functions
console.log(setJSON(selectedShape));
});
google.maps.event.addListener(selectedShape, 'rightclick', function(event) {
// Check if click was on a vertex control point
if (event.vertex === undefined) {
return;
}
deleteMenu.open(map, selectedShape.getPath(), event.vertex);
console.log('right-click');
})
}
function DeleteMenu() {
this.div_ = document.createElement('div');
this.div_.className = 'delete-menu';
this.div_.innerHTML = 'Delete';
var menu = this;
google.maps.event.addDomListener(this.div_, 'click', function() {
menu.removeVertex();
});
}
DeleteMenu.prototype = new google.maps.OverlayView();
DeleteMenu.prototype.onAdd = function() {
var deleteMenu = this;
var map = this.getMap();
this.getPanes().floatPane.appendChild(this.div_);
// mousedown anywhere on the map except on the menu div will close the
// menu.
this.divListener_ = google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
if (e.target != deleteMenu.div_) {
deleteMenu.close();
}
}, true);
};
DeleteMenu.prototype.onRemove = function() {
google.maps.event.removeListener(this.divListener_);
this.div_.parentNode.removeChild(this.div_);
// clean up
this.set('position');
this.set('path');
this.set('vertex');
};
DeleteMenu.prototype.close = function() {
this.setMap(null);
};
DeleteMenu.prototype.draw = function() {
var position = this.get('position');
var projection = this.getProjection();
if (!position || !projection) {
return;
}
var point = projection.fromLatLngToDivPixel(position);
this.div_.style.top = point.y + 'px';
this.div_.style.left = point.x + 'px';
};
DeleteMenu.prototype.open = function(map, path, vertex) {
this.set('position', path.getAt(vertex));
this.set('path', path);
this.set('vertex', vertex);
this.setMap(map);
this.draw();
};
DeleteMenu.prototype.removeVertex = function() {
var path = this.get('path');
var vertex = this.get('vertex');
if (!path || vertex == undefined) {
this.close();
return;
}
path.removeAt(vertex);
this.close();
};
var deleteMenu = new DeleteMenu();
});
google.maps.event.addDomListener(document.getElementById('btnClear'), 'click', function(event) {
selectedShape.setMap(null);
drawingManager.setMap(map);
});
google.maps.event.addDomListener(document.getElementById('save'), 'click', function(event) {
names.push($('#polyname').val());
polygons.push(setJSON(selectedShape));
length = names.length;
console.log(length);
console.log("name: " + names[length-1] + "; polygon: " + polygons[length-1]);
});
google.maps.event.addDomListener(document.getElementById('btnrecall'), 'click', function(event) {
$('#btnClear').click();
console.log($('#btnLoad').val());
var namefield = $('#btnLoad').val();
if (namefield !== undefined){
var polyid = names.indexOf(namefield);
if (polyid > -1) {
var layer = polygons[polyid];
console.log(layer);
console.log(JSON.parse(JSON.stringify(layer)));
}else {
alert("no polygon by that name. Please Try again");
}
}else {
alert("please enter a name to continue.");
}
});
}
答案 0 :(得分:1)
显然,在将代码置于上面的更新#1时,我在stackoverflow中提出的另一个问题直接影响了这个问题的原因。
why am I getting type errors when hovering over map after layers are set?
因此,我有一个变量,我在代码中的其他地方调用了JSON
。使用JSON
作为变量重写了所有全局JSON
指令,这些指令拒绝访问parse
函数。
谢谢所有人。
答案 1 :(得分:0)
var layer = '{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}';
$(document).ready(function() {
// here you can directly use it as a string no need of JSON.Stringify();
$("#string").text(layer);
// here it is parsed as a JSON and works just fine
$someVar = JSON.parse(layer);
$("#object").text($someVar.type);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="string"></p>
<p id="object"></p>
您在问题中提供的变量已经是字符串,因此您不需要使用JSON.Stringify()
。您可以直接将其用作字符串。否则,在代码段中,我设法使用JSON.Parse()
没有问题。也许尝试检查您的代码并将其与示例进行比较?
希望这可以帮助你
答案 2 :(得分:0)
我能够解析它。点击这里您可以参考this了解IE中的JSON浏览器问题。
var layer = '{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}';
console.log(JSON.parse(layer));
&#13;