Question

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

＆＃13;

var stationList=[
	{"latlng":[37.7029,-121.9335],name:"Dublin, CA"},
	{"latlng":[37.6958,-121.9255],name:"Pleasanton CA"},
	{"latlng":[37.6931,-121.9262],name:"Pleasanton CA"}
]

;var infoWnd,mapCanvas;

function initialize(){
	var mapDiv=document.getElementById("map_canvas");
	mapCanvas=new google.maps.Map(mapDiv);
	mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
	
	infoWnd=new google.maps.InfoWindow();
	
	var bounds=new google.maps.LatLngBounds();
	
	var station,i,latlng;
	for(i in stationList){station=stationList[i];
		latlng=new google.maps.LatLng(station.latlng[0],station.latlng[1]);
		bounds.extend(latlng);
		var marker=createMarker(mapCanvas,latlng,station.name);
		createMarkerButton(marker);
	}

	mapCanvas.fitBounds(bounds)
	;}

function createMarker(map,latlng,title){
	var marker=new google.maps.Marker({position:latlng,map:map,title:title});
	
	google.maps.event.addListener(marker,"click",function(){infoWnd.setContent("<strong>"+title+"</title>");
	infoWnd.open(map,marker);});
	
	return marker;
}

function createMarkerButton(marker){
	var ul=document.getElementById("marker_list");
	var li=document.createElement("li");
	var title=marker.getTitle();li.innerHTML=title;ul.appendChild(li);
	google.maps.event.addDomListener(li,"click",function(){google.maps.event.trigger(marker,"click");});
}

google.maps.event.addDomListener(window,"load",initialize);

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

Answer 1

我假设您可以使用php。

因此，如果您可以使用php，则可以将URL（JSON）中的内容读入变量。

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

现在你可以用这样的javascript将JSON数据加载到数组中。

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

您可以使用foreach循环来循环播放JSON和echo多个位置。

Answer 2

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

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;	
}

function setup_map() {
	var avg_lat = 0;
	var avg_long = 0;
	var locations = [];

	for (var i = 0; i < 3; i += 1) {
		locations.push([
			locations_data.pois[i]["address_1"],
			locations_data.pois[i]["latitude"],
			locations_data.pois[i]["longitude"],
		]);

		avg_lat += locations[i][1];
		avg_long += locations[i][2];
	}

	avg_lat /= 3;
	avg_long /= 3;

	map = new google.maps.Map(document.getElementById('map-canvas'), {
		zoom: 12,
		center: new google.maps.LatLng(avg_lat, avg_long),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map
		});

		google.maps.event.addListener(marker, 'click', (function (marker, i) {
			return function () {
				infowindow.setContent(locations[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
}


// Now configure the callback (handler) for your request.
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		locations_data = JSON.parse(xhr.responseText);

		renderData(locations_data);
		setup_map();
	}
}


// Send the XHR
xhr.open('GET', 'http://your-URL-here.com', true);

google.maps.event.addDomListener(window, 'load', function() {
	xhr.send();
});

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

3 个答案: