これが私の仕事です。自分の Web サイト (Google ではなく) で Google マップを開いて、ユーザーの住所 (自宅、職場、および別の住所) にマーカーを移動するつもりでした。そして、このマーカーの場所をサーバーのアドレステーブルに記録しています。他のユーザーが自分のページを開くと、「地図に表示」リンク ボタンが表示されます。ボタン エクスプローラーをクリックすると、Google マップが開き (必要に応じてセルフ ページの div で実行できます)、マーカーとマーカーに関する説明が表示されます。私のプロジェクトではラインをデザインしませんでしたが、同じ方法でラインを追加できます。
このコードのもう 1 つのプロパティは、ユーザー (自分のアドレスを追加する人) が、自分のアドレスをテキスト ボックスに書き込んで、Google 検索メカニズムを使用してアドレスを見つけることができることです。そのため、マーカーを簡単に配置できます。
私はJavaとVBコードを使用しました。しかし、Googleサブグリムが完全にJavaであるため、JavaScriptコードによって処理される重要なセクション:)
言及した完全なJavaScriptコードを次に示します。
var _id = "";
var _adres = "";
var _kull_adi = "";
var _lat;
var _lng;
var geocoder;
var map;
var marker;
var koords = new Array();
window.onload = function () {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(39.42324,35.27587);
map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Move the marker to the address.',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (a) {
_lat = a.latLng.lat().toFixed(8);
_lng = a.latLng.lng().toFixed(8);
$('#mapbilgileri_div').html("Enlem : " + _lat + "</br>Boylam : " + _lng);
});
};
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker.setMap(null);
map.setZoom(15);
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: 'İşaretçiyi adresinizin üzerine getiriniz.',
draggable: true
});
$('#mapbilgileri_div').html("Enlem : " + results[0].geometry.location.lat().toFixed(8) + "</br>Boylam : " + results[0].geometry.location.lng().toFixed(8));
_lat = results[0].geometry.location.lat().toFixed(8);
_lng = results[0].geometry.location.lng().toFixed(8);
map.setCenter(marker.position);
marker.setMap(map);
google.maps.event.addListener(marker, 'dragend', function (a) {
_lat = a.latLng.lat().toFixed(8);
_lng = a.latLng.lng().toFixed(8);
$('#mapbilgileri_div').html("Enlem : " + _lat + "</br>Boylam : " + _lng);
});
} else {
alert("Address couldn't find. Please be sure that you wrote it tuely!: " + status);
}
});
}
function set_guid(guid, adres,kull_adi,adres_decoded) {
_id = guid;
_adres = adres;
_kull_adi = kull_adi;
$('#address').val(adres_decoded);
$('#adresbilgileri_div').html(_id + "</br>" + _adres);
$('#mapbilgileri_div').html("Enlem : " + _lat + "</br>Boylam : " + _lng);
codeAddress();
}
function koordinatekle() {
if (_id.length > 3 && _lat != undefined && _lng != undefined && _adres.length > 3) {
WebService.koordinatekle(_id, _lat, _lng, _kull_adi, geri_donus);
} else {
alert('Please select an address and coordinate from the map !')
}
}
function geri_donus(result, eventArgs) {
if (result = "1") {
alert("coordinate added successfully.");
} else {
alert("Error!");
}
__doPostBack('', '');
}
コードにトルコ語がいくつかありますが、それらは単なる名前と考えてください。そして、Web サービス コード:
<WebMethod()> _
Public Function koordinatekle(ByVal _adres_tipi As String, ByVal _lat As Double, ByVal _lng As Double, ByVal _kull_adi As String) As String
Try
Dim _id As Integer = Val(_adres_tipi.Substring(_adres_tipi.IndexOf("-(ID:") + 5))
If Left(_adres_tipi, 2) = "An" Then
Dim sorgu = (From p In tablolar.genel_bilgilers Where p.kullanici_adi = _kull_adi Select p).First
sorgu.lat = _lat
sorgu.lon = _lng
tablolar.SubmitChanges()
End If
If Left(_adres_tipi, 2) = "Ek" Then
Dim sorgu = (From p In tablolar.free_texts Where p.id = _id Select p).First
sorgu.lat = _lat
sorgu.lon = _lng
tablolar.SubmitChanges()
End If
Return 1
Catch ex As Exception
Return ex.Data.ToString
End Try
End Function
JavaScript コードは、選択されたマーカーの場所を div 要素に記録するために、このサービスを呼び出します。
仕事がとても楽になるので、私はjquery dont forgetを使いました。最初は複雑に見えますが、非常に単純です。説明させてください。
onload関数はマップを初期化します。入力された住所を見つけるためのジオコーダーを作成します。"map" div 要素にマップを作成します。このマップ上にマーカーを作成し、マーカー ドラッグ イベントのリスナーを設定します。
codeaddress関数は、ユーザーが入力したアドレスを見つけようとします。これの重要な機能:
geocoder.geocode({ 'address': address }, function (results, status) {....
この関数はアドレス データを Google に送信し、アドレスの座標を取得しようとします。
別の関数は、データを設定し、Web サービスを介してサーバーに送信するだけです。
これが役立つことを願っています...
それが機能する場合は、私に投票することを忘れないでください:)ありがとう。
注:必要な Google サブグリム キーと必要な dll ファイル (GMaps.dll) を procet に追加すると仮定します。