Uncaught SyntaxError 试图进行反向地理编码答案

【问题标题】：Uncaught SyntaxError trying to do reverse geocodingUncaught SyntaxError 试图进行反向地理编码
【发布时间】：2014-11-17 08:39:32
【问题描述】：

我正在尝试做一些反向地理编码，我做了一个快速的 sn-p 来测试我的代码，看看它是否有效。

这是以下代码：

<html>
<style>
/**
* Default attributes for gadget body.
*/
body {
 font-family: Arial;
background: none transparent;
padding: 0px;
}
html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>
<body>
<div id="map_canvas"></div> 
<script>
var APIKey = "MyKeyValueIsInHere";   
var geocoder;
var map;
var marker;
var locationTest = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1';
var lat = 55.653363;
var lng = 12.547604;

function initialize() {
    var latlng = new google.maps.LatLng(lat,lng);
    // set the options for zoom level and map type
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    // create a map in the map_canvas div element
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    map.setCenter(latlng);
            var marker = new google.maps.Marker({
                map: map, 
                position: latlng

            });
            alert(locationTest);
            var text = JSON.parse(locationTest);
            var infoWindow = new google.maps.InfoWindow();

            var houseNumber = text.address.house_number;
            var road = text.address.road;
            var suburb = text.address.suburb;
            var zipCode = text.address.postcode;
            var city = text.address.city;

            var address = road + " " + houseNumber + ", " + zipCode + " " + suburb + " i " + city;


            google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(address);
            infoWindow.open(map, this);
            });
}
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=" + APIKey + "&sensor=false&callback=initialize";  

    document.body.appendChild(script);
}   

loadScript();   
</script>
</body>
</html>

无论如何，当我运行它时，我收到一个警报弹出： http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1

基本上，我想做的是在我的谷歌地图上的标记顶部弹出一个信息窗口。并且信息窗口应该有作为变量地址的文本。

但是当我运行这段代码时，我得到了一个

Uncaught SyntaxError: Unexpected token h

在第 45 行，也就是这一行：

var text = JSON.parse(locationTest);

那么有人知道我如何解决这个问题吗？

提前致谢！

【问题讨论】：

标签： javascript google-maps geocoding reverse-geocoding nominatim

【解决方案1】：

你有

var locationTest = 'http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1';

然后

var text = JSON.parse(locationTest);

但是 JSON.parse 期望它的参数是一个 JSON 编码的字符串：documentation。您需要首先将网页的contents 获取为字符串，然后将其解析为JSON。错误消息抱怨“http”前面的“h”。它期望第一个字符是“{”。

在您的alert 声明之后，您可以尝试：

var $e = $('<div></div>'); // a jQuery object that does not affect your displayed page
$e.load('http://nominatim.openstreetmap.org/reverse?format=json&lat=55.653363&lon=12.547604&zoom=18&addressdetails=1', function (response) {
    // This code only runs once the response is available from openstreetmap.org
    var text = JSON.parse(response);
    var infoWindow = new google.maps.InfoWindow();
    var houseNumber = text.address.house_number;
    var road = text.address.road;
    var suburb = text.address.suburb;
    var zipCode = text.address.postcode;
    var city = text.address.city;
    var address = road + " " + houseNumber + ", " + zipCode + " " + suburb + " i " + city;
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(address);
        infoWindow.open(map, this);
    });
});

【讨论】：

我作为一名程序员有点缺乏经验，所以不确定从哪里开始。你的意思是我需要把 {} 放在 locationTest 中，或者到底是什么？（抱歉这个愚蠢的问题）。
以http://开头的URL是网页的地址。您需要通过网络获取该网页的内容，然后解析内容。使用 jQuery 是最简单的。这里：jsfiddle.net/emrys57/p0zLsgs0
获取页面内容需要时间。 jQuery load(a,b) 函数在页面 a 加载到变量 r 时执行 b(r)。
如果你查看 jsfiddle 页面并打开浏览器控制台，chrome - view - developer - javascript 控制台，您将看到 3 条控制台调试消息。
感谢您的支持！祝你好运！