私はこの2日間、JSコードの少し、そしてさまざまな落とし穴に地図に取り組んできました。 JSと初めて接触したとき、あらゆる種類の困難があります。過去数日間にいくつかの研究を要約して、トリックを尋ねましょう。
イベントリスナーで閉鎖を使用します
イベントリスナーを実行する場合、プライベートデータと永続的なデータをオブジェクトに添付することが望ましいことがよくあります。 JavaScriptは「プライベート」インスタンスデータをサポートしていませんが、内部関数が外部変数にアクセスできるようにするクロージャーをサポートしています。リスナーの場合、クロージャーは、通常発生するオブジェクトに添付されていない変数にアクセスするのに理想的です。
次の例では、イベントリスナーの関数閉鎖を使用して、暗号化されたメッセージを一連のタグに割り当てます。各タグをクリックすると、タグ自体に含まれていない暗号化されたメッセージの一部が表示されます。
コードコピーは次のとおりです。
var Map;
関数initialize(){
var mylatlng = new Google.maps.latlng(-25.363882,131.044922);
var mapoptions = {
ズーム:4、
センター:mylatlng、
maptypeid:google.maps.maptypeid.roadmap
}
map = new Google.maps.map(document.getElementById( "Map_canvas")、mapoptions);
//ランダムな場所で5つのマーカーをマップに追加します。
var Southwest = new Google.maps.latlng(-31.203405,125.244141);
var Northeast = new Google.maps.latlng(-25.363882,131.044922);
var Bounds = new Google.maps.latlngbounds(南西、北東);
map.fitbounds(bounds);
var lngspan = northeast.lng() - southwest.lng();
var latspan = northeast.lat() - southwest.lat();
for(var i = 0; i <5; 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());
AttachSecretMessage(Marker、I);
}
}
//クリックしたときに5つのマーカーが秘密のメッセージを表示します
//しかし、そのメッセージはマーカーのインスタンスデータ内ではありません。
関数AttachSecretMessage(Marker、number){
var message = ["this"、 "is"、 "the"、 "secret"、 "message"];
var infowindow = new google.maps.infowindow(
{content:message [number]、
サイズ:新しいgoogle.maps.size(50,50)
});
google.maps.event.addlistener(マーカー、 'click'、function(){
infowindow.open(Map、Marker);
});
}
このコードはGoogleの役人からコピーされました
次に、緯度と経度を読み、データベースから情報を住み、Googleマップでマークを付けてクリックして表示して表示します。
マルチポイント注釈を実装するには、上記のコードを参照できます
コードコピーは次のとおりです。
<script type = "text/javascript">
var Map;
window.onload = function load(){
var number = '<%= number%>'; //バックグラウンドCSでpubilcの数の値を取得します
varアドレス= new array()
var weidu = new Array();
var jingdu = new Array();
var chepai = new Array();
<%(int i = 0; i <number; i ++){%>
weidu.push( '<%= lan [i]%>'); //バックグラウンドCSから緯度と経度の値を取得します
jingdu.push( '<%= lon [i]%>');
address.push( '<%= addr [i]%>');
chepai.push( '<%= carnum [i]%>');
// var wei;
// wei = chepai ['<%= i%>'];
// alert(wei);
<%}%>
var latlng = new google.maps.latlng(weidu [0]、jingdu [0]);
// var mylatlng = new Google.maps.latlng(25.273566、110.290195);
var myoptions = {
ズーム:8、
センター:latlng、
maptypeid:google.maps.maptypeid.roadmap
};
map = new Google.maps.map(document.getElementById( "Map_canvas")、myoptions); //// Map Instanceを初期化します
for(var j = 0; j <number; j ++)//私は長い間ここで立ち往生しています。JSタイプはvarのみであるため。私はJSとCSを混乱させ、「%%>。実際、単純なJSはそれを必要としない、それはCとほとんど同じです
{
var lat = weidu [j];
var lng = jingdu [j];
var address = address [j];
var chepaihao = chepai [j];
// alert(j);
// alert(lat);
// var image = 'image/webcam.png';
//フラグポイントを設定します
var mylatlng = new google.maps.latlng(weidu [j]、jingdu [j]);
var h = chepaihao;
var tit = h.tostring();
var marker = new google.maps.marker({
位置:mylatlng、
マップ:マップ、
//アイコン: "http://google-maps-icons.googlecode.com/files/yellow08.png"、
//アイコン:画像、//アイコンを通じて、表示するアイコンを設定できます。設定しない場合は、Googleマップのデフォルトアイコンを表示します。
タイトル:タイトル//タイトルとは、マウスをマーカーに置くことにより、マーカーに表示される値を意味します。
});
AttachSecretMessage(Marker、J、addre、lat、lng);
}
}
関数AttachSecretMessage(Marker、number、addre1、lat1、lng1){
// var message = ["this"、 "is"、 "the"、 "secret"、 "message"];
var infowindow = new google.maps.infowindow(
{content: "<span style = 'font-size:15px'> <b>アドレス:</b>" + addre1 + "<br>" + "緯度と経度:" + lat1 + "、" + lng1 + "</span>"、
サイズ:新しいgoogle.maps.size(50、50)
});
// infowindow.setContent( "アドレス:" +addre1 +"経度:" +lat1 +"lat:" +lng1);
//クリックして情報をポップアップします
google.maps.event.addlistener(マーカー、 'click'、function(){
infowindow.open(Map、Marker);
});
}
</script>
CSバックエンドコード:
コードコピーは次のとおりです。
システムの使用。
System.collections.genericを使用しています。
System.linqを使用しています。
system.webを使用しています。
system.web.uiを使用しています。
System.Web.ui.WebControlsを使用します。
System.web.ui.htmlControlsを使用します。
System.data.sqlclientを使用しています。
パブリックパートクラスdefault2:System.Web.ui.page
{
public double [] la = new double [25];
public double [] ln = new double [25];
public int [] id = new int [25];
public string [] addr = new String [25];
公開int番号;
保護されたvoid page_load(オブジェクト送信者、eventargs e)
{
string mycnnconnectionstring1 = system.configuration.configurationmanager.connectionstrings ["testconect"]。connectionString; //接続文字列を作成します
sqlconnection mycnn1 = new sqlconnection(mycnnconnectionstring1);
mycnn1.open();
sqlcommand cmd1 = new sqlcommand( "select l_id、l_lantitude、l_longitude、l_address from raptoposition"、mycnn1);
sqldatareader dr1 = cmd1.executereader();
int k2 = 0;
int k3 = 0;
int k4 = 0;
int k1 = 0;
//文字列buf1 = "";
double buf2 = 0;
double buf3 = 0;
int buf4 = 0;
文字列buf1 = "0";
while(dr1.read())
{
// lat
buf2 =(double)dr1 ["l_lantitude"];
la [k2] = buf2;
K2 ++;
// lng
buf3 =(double)dr1 ["l_longitude"]; ///データベースはdoubleを使用してフロートタイプのデータを読み取る必要があります
ln [k3] = buf3;
K3 ++;
// id
buf4 =(int)dr1 ["l_id"];
id [k4] = buf4;
K4 ++;
buf1 = dr1 ["l_address"]。toString();
addr [k1] = buf1;
K1 ++;
}
番号= k4;
dr1.close();
mycnn1.close();
}
}