<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Example - Random Weather Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQcTQoRJ_JVFHVwderj38GcfiXt6hQX5E6h3W3sV-l-QbtgIls1pN0iAw"
type="text/javascript"></script>
<script src="../src/markermanager.js"></script>
<script type="text/javascript">
//<![CDATA[
var IMAGES = [ "sun", "rain", "snow", "storm" ];
var ICONS = [];
var map = null;
var mgr = null;
function setupMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(48.25, 11.00), 4);
map.enableDoubleClickZoom();
window.setTimeout(setupWeatherMarkers, 0);
}
}
function getWeatherIcon() {
var i = Math.floor(IMAGES.length*Math.random());
if (!ICONS[i]) {
var icon = new GIcon();
icon.image = "images/"
+ IMAGES[i] + ".png";
icon.iconAnchor = new GPoint(16, 16);
icon.infoWindowAnchor = new GPoint(16, 0);
icon.iconSize = new GSize(32, 32);
icon.shadow = "images/"
+ IMAGES[i] + "-shadow.png";
icon.shadowSize = new GSize(59, 32);
ICONS[i] = icon;
}
return ICONS[i];
}
function getRandomPoint() {
var lat = 48.25 + (Math.random() - 0.5)*14.5;
var lng = 11.00 + (Math.random() - 0.5)*36.0;
return new GLatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
}
function getWeatherMarkers(n) {
var batch = [];
for (var i = 0; i < n; ++i) {
谷歌地图处理大量标记
最新推荐文章于 2021-12-08 18:28:41 发布
这个示例展示了如何使用Google Maps API和MarkerManager.js库来处理大量标记,生成随机天气图标。代码随机地在地图上放置带有四种天气图标的标记,并使用Ajax请求获取额外的数据。
摘要由CSDN通过智能技术生成