jquery は、Google マップ API コントロール、listeners_jquery と組み合わせて使用されます。-jsチュートリアル-php.cn

jquery は、Google マップ API コントロール、listeners_jquery と組み合わせて使用されます。

WBOY

リリース： 2016-05-16 18:33:14

オリジナル

1276 人が閲覧しました

Google Maps JavaScript API を使用すると、API を使用する前に、http://code.google.com にアクセスして API キーを申請する必要があります。 /apis/maps/signup.html。ここでは、取得したキーが ABQIAA であると仮定します。
jquery についてはもう面倒ではありません。インターネット上には jquery についての紹介がたくさんあります。
次に、JQuery と Google Maps JavaScript API を使用して、Google Maps の興味深い地図効果を組み合わせて、Google Maps JavaScript API に慣れるという目標を達成します。
最初の HelloChina:
(1) HTML ファイルに HTML コードを記述します:
map.html

コードをコピーコードは次のとおりです。

"http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
JQuery を使用した Google マップ . src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type="text/javascript">
 
<ボディ> 
< ;div id="メッセージ">

(2)jsファイルに記述 
map.js

コードをコピーコードは次のとおりです: $(document) 。 ready(function()

{

//ブラウザの互換性を確認します
if (GBrowserIsSupport()) { 
var map = new GMap2(document.getElementById("map")); 
map .setCenter(new GLatLng(36.94, 106.08), 4);//中国の緯度経度およびローカル倍率
map.setMapType(G_SATELLITE_MAP)
//ドキュメントがアンロードされるときにトリガーされます
$( window); .unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert( '使用しているブラウザは Google マップをサポートしていません!'); 
} 
}); 

 
(3) アドレス バーにページに対応するアドレスを入力します。キーはあなたのものと同じです) 一致するアドレスまたはドメイン名を入力してレンダリングを表示すると、中国が地図の中心にあることがわかります。 
HolloChina のレンダリング

地図の移動と変形
(1) JavaScript コードを次のように変更します:
map.js

コードをコピーコードは次のとおりです: $(document).ready(function()

{

if (GBrowserIsCompatibility()) { 
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.94, 106.08), 4); 
//4 秒後に移動
window.setTimeout(function) () { 
map.panTo(new GLatLng(35.746512259918504,78.90625)); 
}, 4000); .unbind (); 
GUnload(); 
}); 
}else 
{ 
alert('お使いのブラウザは Google マップをサポートしていません!'); } 
}); 

 
 (2) 表示する対応する住所を入力し、4 秒待つと、地図の中心が中国の西に移動することがわかります (おおよその位置)。 
地図 中心は中国の西に移動します
コントロールを追加し、地図の種類を変更します
JavaScript コードを次のように変更します: 
map.js 

コードをコピーします

コードは次のとおりです: $(document).ready(function() { if (GBrowserIsCompatibility( )) { var map = new GMap2( document.getElementById("map"));

//スモールスケーリングコントローラー

map.addControl(new GSmallMapControl()); controller
map.addControl(new GMapTypeControl ());
map.setCenter(new GLatLng(36.94,106.08),4); // 地図を衛星地図として設定します
map.setMapType (G_SATELLITE_MAP);//マップタイプを変更します
$(window).unload(function (){
$('.').unbind();
GUnload();
}) ;
}else
{
alert('お使いのブラウザは Google マップをサポートしていません!')
}

ページを更新すると、衛星地図の左上隅に小さな伸縮コントロールが表示され、右上隅に地図選択コントロールが表示されます
コントロールを追加した後のレンダリング
イベントリスナーを追加し、スクロールホイールの伸縮コントロールの効果をオンにします
JavaScript コードを変更します:
map.js

コードをコピーコードは次のとおりです。

 
$(document).ready(function() 
{ 
if (GBrowserIsCompatibility()) { 
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); - マウス ホイールを前に回転すると地図が拡大表示され、逆に回転すると縮小表示されます
map.enableScrollWheelZoom() ; 
//moveend イベント リスナーを追加します 
GEvent.addListener(map, "moveend", function() { 
var center = map.getCenter(); 
//この DIV に表示 地図の中心の緯度と経度
$('#message').text(center.toString( )); 
}); 
map.setCenter(new GLatLng(36.94,106.08),4); 
$(window).unload(function (){ 
$('.') .unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('お使いのブラウザは Google マップをサポートしていません!'); } 
}); 

 
地図をドラッグすると、この時の地図が拡大・縮小し、地図の左側の座標情報が変化します。