十字線と座標を表示
Google Maps APIで、十字線と座標を表示させるサンプルを作ってみました。
・http://www.kyoto-giraffe.net/maps/searchPointMaps.html
動作テストを行うと、以下の順位でスムーズに動きました。
１位：FireFox ・・・スムーズに動く
２位：Opera ・・・ぎこちない場面もあるが比較的スムーズに動く
３位：IE6.0 ・・・ぎこちない
さすが、IEです。ダメダメです。
サンプルソースを以下に公開します。
十字線は自分でファイルを用意してやる必要があります。
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.7584536075592, 34.985381106110495), 4);//十字アイコン
var icon = new GIcon();
icon.image = "http://www.kyoto-giraffe.net/maps/cross.gif";
icon.iconSize = new GSize(100,100);
icon.iconAnchor = new GPoint(50,50);
var marker = new GMarker(map.getCenterLatLng(),icon);
map.addOverlay(marker);//地図移動で十字アイコン追随と座標を表示
GEvent.addListener(map,"move",function() {
map.clearOverlays();
marker = new GMarker(map.getCenterLatLng(),icon);
map.addOverlay(marker);//十字アイコンが示す座標を表示
document.getElementById('datalatlon').innerHTML = map.getCenterLatLng();
});
//]]>
</script>
<div id="datalatlon" style="font-size:1.2em;">------</div>
</body>
・人気ブログランキング←参加中です。クリックお願いします。m(_ _)m
