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

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' )});

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。