51Mapマップインターフェースの実装（サンプルコード）_javascriptスキル-jsチュートリアル-php.cn

51Mapマップインターフェースの実装（サンプルコード）_javascriptスキル

WBOY

リリース： 2016-05-16 17:13:11

オリジナル

1300 人が閲覧しました

51Map は地図インターフェイスを無料で提供します。以下は呼び出しインターフェイスで、地理的位置のラベル付け、保存、変更、およびエコー機能を実装します。
51 地図 URL: http://api.51ditu.com/

コードを Web ページにコピーします。コードは次のとおりです。

地図上のマーク:

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

 //マップ アノテーション
 $( document).ready(function() {
 var ico=new LTIcon("",[24,24],[12,12] );
 var map= new LTMaps("mapdiv");//マップ オブジェクト
 var controlB; //マーカー コントロール
 map.centerAndZoom("tianjin",5);//天津
 map.handleMouseScroll();// マウス ホイール
 var controlZoom = new LTStandMapControl();// ズーム コントロール
 map.addControl( controlZoom);
 controlB = new LTMarkControl();// マークを追加コントロールしてイベントをボタンにバインドします
 controlB.setVisible(false);
 document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
 map.addControl( controlB );
 LTEvent.addListener ( controlB,"mouseup",function(){getPoi(controlB)} );
 })

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

//マークアップを追加するときにこの関数を実行します
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$ ("#x").val(poi.getLongitude()); //x,y は入力タグ ID であり、バックグラウンドの保存場所に渡されます
$("#y").val(poi.getLatitude() ;

style="color: #D01E14; font-weight: baller; font-size: 12px;">地図が表示されない場合は、ここをクリックしてください

🎜>

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

 //マップ echo
 $(document).ready(function(){
 map("mapdiv");
 })
 //マップ
 function map(div){
 var map=new LTMaps(div);// マップ オブジェクト
 var marker=new LTMarker(new LTPoint($("#x").val(),$(" #y").val()));//マーク作成

map.handleMouseScroll();//マウスホイールズーム
map.centerAndZoom(new LTPoint($("#x").val() ,$("#y").val()),5); //座標付き中心の地図を表示します
map.addOverLay(marker) //地図にマーカーを追加します

} 地図上のマーカーを変更します:

コードをコピー

コードは次のとおりです:

 //マップ echo
 $(document).ready(function(){
 map("mapdiv");
 })
 //Map
 関数マップ(div){
 var map=new LTMaps(div);//マップオブジェクト
 var marker=new LTMarker(new LTPoint($("#x").val(),$("#y " ).val()));//ラベルの作成
map.handleMouseScroll();//マウスホイールズーム
map.centerAndZoom(new LTPoint($("#x").val(),$ ( "#y").val()),5); //座標を中心に地図を表示
map.addOverLay(marker) //地図にマーカーを追加
 var controlZoom = new LTStandMapControl( ); 
 map.addControl( controlZoom );
 // マーク コントロールを追加し、イベントをボタンにバインドします
 var controlB = new LTMarkControl();// コントロールをマークします
 controlB.setVisible (false); 
 document.getElementById("addPosition").onclick=function (){map.removeOverLay(marker,true);controlB.btnClick()};
 map.addControl( controlB );
 LTEvent.addListener (controlB,"mouseup",function(){getPoi(controlB)} );
 }
 //アノテーション追加時にこの関数を実行
 function getPoi(controlB){
 var poi = controlB.getMarkControlPoint();
 $("#x").val(poi.getLongitude());
 $("#y").val(poi.getLatitude());
 }

その他のパラメータ設定:
ラベルアイコンのスタイルをカスタマイズできます

コードをコピーしますコードは次のとおりです:

var ico=new LTIcon("",[24,24], [12,12]);// アイコン オブジェクトを作成します
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico );//マークを作成
 //マウスをマーク上に移動すると、マークの内容を表示できます 
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('mark content' )});