JavaScriptの例
5975 ワード
今日はGoogle mapsを使った例を研究しました.勉強した知識を書きます.
まず声明します.JavaScriptに詳しくないので、例が浅い人は笑わないでください.私は徐々に例を出して、少しずつ勉強します.
まず声明します.JavaScriptに詳しくないので、例が浅い人は笑わないでください.私は徐々に例を出して、少しずつ勉強します.
<script type="text/javascript">
//<![CDATA[
// GMap
var map;
var eventinfo;
var mapcenter;
var zoomlevel;
var maptype;
// ，el HTML ，info
function updateInfo(el, info)
{
el.innerHTML = info;
}
//
function addDragListener()
{
//
GEvent.addDomListener(map, 'dragstart', function()
{
updateInfo(eventinfo, " ：dragstart");
});
GEvent.addDomListener(map, 'drag', function()
{
updateInfo(eventinfo, " ：drag");
updateInfo(mapcenter, " ：" + map.getCenter().lat() + " " + map.getCenter().lng());
});
GEvent.addDomListener(map, 'dragend', function()
{
updateInfo(eventinfo, " ：dragend");
});
}
//
function addZoomListener()
{
//
GEvent.addDomListener(map, 'zoomstart', function()
{
updateInfo(eventinfo, " ：zoomstart");
});
GEvent.addDomListener(map, 'zoomend', function()
{
updateInfo(eventinfo, " ：zoomend");
updateInfo(zoomlevel, " ：" + map.getZoom());
});
}
// maptypechanged
function addMapTypeListener()
{
// maptypechanged
GEvent.addDomListener(map, 'maptypechanged', function()
{
updateInfo(eventinfo, " ：maptypechanged");
updateInfo(maptype, " ：" + map.getCurrentMapType().getName(false));
});
}
function load()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.92, 116.46), 4);
map.addControl( new GMapTypeControl() );
map.addControl( new GLargeMapControl() );
eventinfo = document.getElementById("eventinfo");
mapcenter = document.getElementById("mapcenter");
zoomlevel = document.getElementById("zoomlevel");
maptype = document.getElementById("maptype");
addDragListener();
addZoomListener();
addMapTypeListener();
}
}
//]]>
</script>
</head>
<!-- load() ， onunload="GUnload()" -->
<body onload="load()" onunload="GUnload()">
<!-- id map DIV Google -->
<div id="map" style="width: 500px; height: 400px;"></div>
<div id="eventinfo"></div>
<div id="mapcenter"></div>
<div id="zoomlevel"></div>
<div id="maptype"></div>
</body>
： ， load() ， map ： 、 、 ， 。 。