kyle'sBlog: Google Map API-繪製雷達圖

2013年9月3日星期二

Google Map API-繪製雷達圖

標記地圖上，目標點方圓N公里內的範圍。

以下是語法的部分：

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
	服務範圍
	</title><link type="text/css" href="https://developers.google.com//maps/documentation/javascript/examples/default.css" rel="stylesheet" />
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=zh-TW"></script>
	<script type="text/javascript">
	var My_radius = 0;
	var My_address = "";

	function initialize() {
	My_radius = parseInt(document.getElementById('txtMAX_DISTANCE').value);
	My_address = document.getElementById('txtFULL_ADDRESS').value;
	var mapOptions = {
	zoom: 13,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	var geocoder = new google.maps.Geocoder();

	geocoder.geocode({ 'address': My_address }, function (results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	var latlng = results[0].geometry.location;
	map.setCenter(latlng);
	var marker = new google.maps.Marker({
	map: map,
	position: latlng
	});


	var populationOptions = {
	strokeColor: '#FF0000',
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: '#FF0000',
	fillOpacity: 0.35,
	map: map,
	center: latlng,
	radius: My_radius
	};
	new google.maps.Circle(populationOptions);


	} else {
	alert("Geocode was not successful for the following reason: " + status);
	}
	});
	}
	google.maps.event.addDomListener(window, 'load', initialize); </script>
	</head>
	<body>
	<div id="map-canvas">
	</div>
	<input name="txtFULL_ADDRESS" type="hidden" id="txtFULL_ADDRESS" value="高雄市鳳山區光遠路226號B1" />
	<input name="txtMAX_DISTANCE" type="hidden" id="txtMAX_DISTANCE" value="3000" />
	</body>
	</html>