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

Use JSON data from a URL to show Google Map Markers - how?

本文关键字：地图 谷歌 图标 如何 显示 数据 URL JSON      更新时间：2023-09-26

下面的代码在谷歌地图上显示地图标记，但每个位置的纬度和经度都硬编码到JS文件中。从URL中提取数据的最佳方法是什么？请注意，下面的脚本还允许用户单击html中的文本链接，并在此过程中突出显示地图上的一个点。

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

如果你试图完全用JavaScript来完成，并且你从中提取的URL与你的页面所在的域相同，那么你可以使用XHR在(https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)，但如果它不在同一域下，则需要设置为JSON提供服务的服务器以允许跨域请求(http://www.html5rocks.com/en/tutorials/cors/)。如果你控制服务器，那就很容易了，但如果你不控制服务器，那么你就必须使用服务器端的东西来为你获取它（或者在你自己的服务器上使用一个简单的代理url就可以了），或者在浏览器中使用类似Flash的东西来实现这一点，但我无论如何都不推荐Flash。

我假设您可以使用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的多个位置。

我在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();
});

相关文章：