ホームページ > ウェブフロントエンド > jsチュートリアル > js クロージャ メソッドを使用してマルチポイント ラベル バブリングを実装する example_javascript スキル

js クロージャ メソッドを使用してマルチポイント ラベル バブリングを実装する example_javascript スキル

WBOY
リリース: 2016-05-16 16:46:30
オリジナル
1230 人が閲覧しました

ここ 2 日間、ちょっとした JS コードとさまざまな落とし穴を使ってマップの作成に取り組んできました。初めて js に触れるのですが、色々と苦労しました。ここ数日で調べた落とし穴をまとめます。
イベントリスナーでのクロージャの使用。
イベントリスナーを実行するとき。これは通常、プライベートな永続データをオブジェクトに添付することによって行われます。 JavaScript は「プライベート」インスタンス データをサポートしませんが、内部関数が外部変数にアクセスできるようにするクロージャをサポートします。イベント リスナーでは、クロージャは、イベントが発生するオブジェクトに通常は関連付けられていない変数にアクセスするのに最適です。

次の例では、イベント リスナーで関数クロージャーを使用して、暗号化されたメッセージを一連のタグに割り当てます。各マーカーをクリックすると、マーカー自体には含まれていない暗号化されたメッセージの一部が表示されます。

コードをコピーします コードは次のとおりです。
関数の初期化( ) {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps .MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map_canvas"),

// マップに 5 つのマーカーを追加します。ランダムな場所。
varSouthWest = new google.maps.LatLng(-31.203405,125.244141);
var NorthEast = new google.maps.LatLng(-25.363882,131.044922);マップ.LatLngBounds (southWest,northEast);
map.fitBounds(bounds);
var lngSpan = NorthEast.lng() - SouthWest.lng(); .lat( );
for (var i = 0; i var location = new google.maps.LatLng(southWest.lat() latSpan * Math.random(),
southWest .lng() lngSpan * Math.random());
var marker = new google.maps.Marker({
位置: 位置,
地図: 地図
}); 🎜>var j = i 1;
marker.setTitle(j.toString());
}
}

//マーカーをクリックするとシークレット メッセージが表示されます
// しかし、そのメッセージはマーカーのインスタンス データ内にありません。 the", "secret","message"];
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,mark);
}


このコードは Google 公式サイトからコピーしました

次に、データベースから経度、緯度、住所の情報を読み取り、Google マップ上でマークして マークをクリックしたいと思います情報

マルチポイント アノテーションを実現するには、上記のコードは



コードをコピーします


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




CS バックエンド コード:




コードをコピー

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

using System; using System.Collections.Generic; using System.Linq; System.Web を使用; System.Web.UI を使用; System.Web.UI.HtmlControls を使用; .Data.SqlClient;
public 部分クラス Default2 : System.Web.UI.Page
{
public double[] la = new double[25]; [25];
public int[] id = new int[25];
public string[] addr = new string


protected void Page_Load(object sender, EventArgs e)
{
string mycnnConnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings["testconect"].ConnectionString; // 接続文字列を作成します
SqlConnection mycnn1 = new SqlConnection(mycnnConnectionString1) );
mycnn1 .Open();
SqlCommand cmd1 = new SqlCommand("最新位置から L_ID、L_Lantitude、L_Address を選択 ", mycnn1); >int k2 = 0;
int k4 = 0;
// 文字列 buf1 = ""; 🎜>double buf3 = 0 ;
int buf4 = 0;
while (dr1.Read())
{
//lat
buf2 = (double)dr1["L_緯度"];
la[k2] =
k2 ;
//lng
buf3 = (double)dr1["L_経度"];///データベースは float 型を読み取ります。データは double である必要があります。
ln[k3] =
k3;
buf4 = (int)dr1["L_ID"]; [k4] = buf4;
buf1 ["L_Address"].ToString();
addr1.Close(); .Close();

}


}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート