使用来自URL的JSON数据来显示Google地图标记 - 如何？

Question

下面的代码在Google地图上显示地图标记，但每个地方lat和long都硬编码到JS文件中。取而代之的是从网址中提取数据的最佳方式是什么？请注意，下面的脚本还允许用户点击html内的文本链接，并在地图上突出显示一个点。

var stationList=[ 
 
\t {"latlng":[37.7029,-121.9335],name:"Dublin, CA"}, 
 
\t {"latlng":[37.6958,-121.9255],name:"Pleasanton CA"}, 
 
\t {"latlng":[37.6931,-121.9262],name:"Pleasanton CA"} 
 
] 
 

 
;var infoWnd,mapCanvas; 
 

 
function initialize(){ 
 
\t var mapDiv=document.getElementById("map_canvas"); 
 
\t mapCanvas=new google.maps.Map(mapDiv); 
 
\t mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); 
 
\t 
 
\t infoWnd=new google.maps.InfoWindow(); 
 
\t 
 
\t var bounds=new google.maps.LatLngBounds(); 
 
\t 
 
\t var station,i,latlng; 
 
\t for(i in stationList){station=stationList[i]; 
 
\t \t latlng=new google.maps.LatLng(station.latlng[0],station.latlng[1]); 
 
\t \t bounds.extend(latlng); 
 
\t \t var marker=createMarker(mapCanvas,latlng,station.name); 
 
\t \t createMarkerButton(marker); 
 
\t } 
 

 
\t mapCanvas.fitBounds(bounds) 
 
\t ;} 
 

 
function createMarker(map,latlng,title){ 
 
\t var marker=new google.maps.Marker({position:latlng,map:map,title:title}); 
 
\t 
 
\t google.maps.event.addListener(marker,"click",function(){infoWnd.setContent("<strong>"+title+"</title>"); 
 
\t infoWnd.open(map,marker);}); 
 
\t 
 
\t return marker; 
 
} 
 

 
function createMarkerButton(marker){ 
 
\t var ul=document.getElementById("marker_list"); 
 
\t var li=document.createElement("li"); 
 
\t var title=marker.getTitle();li.innerHTML=title;ul.appendChild(li); 
 
\t google.maps.event.addDomListener(li,"click",function(){google.maps.event.trigger(marker,"click");}); 
 
} 
 

 
google.maps.event.addDomListener(window,"load",initialize);

#map_canvas { 
 
    width: 70%; 
 
    padding-bottom: 40%; 
 
    float: left; 
 
} 
 
ul#marker_list { 
 
    float: left; 
 
    width: 20%; 
 
    background: #f9f9f9; 
 
    border: 1px solid #888; 
 
    margin: 0 0 0 5px; 
 
    padding: 0; 
 
    
 
    } 
 
ul#marker_list li { 
 
    padding: 5px; 
 
    list-style-type: none; 
 
    color: #444; 
 
    border-bottom: 1px solid #888; 
 
    }

<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> 
 
<div id="map_canvas"></div> 
 
<ul id="marker_list"></ul> 
 
\t

Answer 1

如果您试图完全使用JavaScript，并且您从中拉取的网址与您的网页所在的网域位于同一个域下，那么您可以使用XHR将JSON加载到（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest），但如果它不在同一个域中，则需要设置服务于JSON的服务器以允许跨域请求（http://www.html5rocks.com/en/tutorials/cors/）。如果你控制服务器，那么这很容易，但如果你不这样做，那么你将不得不使用服务器端来为你提取它（或者你自己的服务器上的简单代理url会起作用），或者使用某些东西像浏览器中的Flash一样做，但我不能以任何方式推荐Flash。

Answer 2

我假设你可以使用PHP。

所以，如果你可以使用PHP，你可以从URL（JSON）读取内容到一个变量。

$json = file_get_contents('http://mappie.com/api/json'); 
$json_decoded = json_decode($json, true); 

现在您可以像这样在JavaScript中将数据加载到数组中。

var stationList = [ 
<?php 
    echo '{"latlng":[' . $json_decoded["lat"] . ',' . $json_decoded["lon"] . '],name:"' . $json_decoded["name"] . '"}' 
?> 
]; 

可以使用foreach循环来trought的JSON和echo多个位置。

Answer 3

我想通了，用Javascript。希望这可以帮助其他新手！

// Setup your globals 
 
var locations_data; 
 
var infowindow = new google.maps.InfoWindow(); 
 
var map; 
 
var marker, i; 
 
var xhr = new XMLHttpRequest(); 
 

 

 
// Define your global functions 
 
function renderData(data) { 
 
    var html = data.pois.slice(0,3).reduce(function (frag, item) { 
 
     frag.appendChild(pios(item)); 
 
     return frag; 
 
    }, document.createDocumentFragment()); 
 
    document.getElementById('locations').appendChild(html); 
 
} 
 

 
function pios(item) { 
 
    var p = document.createElement('pre'); 
 
    p.id = item.id; 
 
    p.textContent = item.address_1 + '\n' + item.city + ' ' + item.region + ' ' + item.postal_code; 
 
    return p; \t 
 
} 
 

 
function setup_map() { 
 
\t var avg_lat = 0; 
 
\t var avg_long = 0; 
 
\t var locations = []; 
 

 
\t for (var i = 0; i < 3; i += 1) { 
 
\t \t locations.push([ 
 
\t \t \t locations_data.pois[i]["address_1"], 
 
\t \t \t locations_data.pois[i]["latitude"], 
 
\t \t \t locations_data.pois[i]["longitude"], 
 
\t \t ]); 
 

 
\t \t avg_lat += locations[i][1]; 
 
\t \t avg_long += locations[i][2]; 
 
\t } 
 

 
\t avg_lat /= 3; 
 
\t avg_long /= 3; 
 

 
\t map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
\t \t zoom: 12, 
 
\t \t center: new google.maps.LatLng(avg_lat, avg_long), 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t }); 
 

 
\t for (i = 0; i < locations.length; i++) { 
 
\t \t marker = new google.maps.Marker({ 
 
\t \t \t position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
\t \t \t map: map 
 
\t \t }); 
 

 
\t \t google.maps.event.addListener(marker, 'click', (function (marker, i) { 
 
\t \t \t return function() { 
 
\t \t \t \t infowindow.setContent(locations[i][0]); 
 
\t \t \t \t infowindow.open(map, marker); 
 
\t \t \t } 
 
\t \t })(marker, i)); 
 
\t } 
 
} 
 

 

 
// Now configure the callback (handler) for your request. 
 
xhr.onreadystatechange = function() { 
 
\t if (xhr.readyState == 4 && xhr.status == 200) { 
 
\t \t locations_data = JSON.parse(xhr.responseText); 
 

 
\t \t renderData(locations_data); 
 
\t \t setup_map(); 
 
\t } 
 
} 
 

 

 
// Send the XHR 
 
xhr.open('GET', 'http://your-URL-here.com', true); 
 

 
google.maps.event.addDomListener(window, 'load', function() { 
 
\t xhr.send(); 
 
});