この記事は、
マーカーのグループ化に関する記事の前編です。なぜなら、ご存じのように、不要なものをグループ化するには、まず不要なものを表示する必要があるためです;）
プラグインを使用すると、カスタムアイコンおよび情報ウィンドウ、グループ（オプション）を使用して、マップ上に多くのマーカーを表示できます。 マーカーをドラッグして結果を手動で調整し、その変化を追跡することにより、ジオコーディングに使用されるターゲット入力を指定することもできます。
背景
タスクは、ユーザーにオブジェクトをマップ上でマークする機会を与え、このプロセスをできるだけ楽しくすることでした-Googleジオコーディングを使用します。 最初から行うこともできますが、既製のオプションを見つけることをお勧めします。 Apiの3番目のバージョンでは、そのようなものは目立ったきしみで検索されましたが、しばらくして
プラグインが見つかり、それが後にjGmapの基礎になりました。 彼はうまくジオコーディングしましたが、それ以上ではありませんが、それでも結果を手動で調整する機能が必要です。
変身
次に、状況を想像してください。ユーザーが以前に作成したオブジェクトを編集するようになった場合、特に手動で変更された場合は、再度ジオコーディングしないでください。 次に、ジオコーディングの結果を手動で調整し、マーカーを表示するための関数を作成しました。 原則として、悪くはありませんでした-私たちは探し、調整し、表示しています。 オブジェクトの一般的なリストを表示するために、重要な変更が後に行われました。まず、マーカーの実際の配列（単一のインスタンスではなく）、グループ化のためのマーカーマネージャーの束、アイコンと情報ウィンドウのカスタマイズを表示します。
そして、ロジックはどこにありますか
これはすべて自動ジオコーダーと呼ばれ、それに応じて動作しました。テキスト入力にしがみつき、CSSクラスは将来のマップ、位置（入力の前後）などでdivに設定されました。 これがジオコーディングプラグインではなくなったことは明らかでした。 いくつかの詐欺-プラグインは現在の形をとっています。
使い方
プラグインを機能させるには、jQueryバージョン1.3.2以降が必要です。これは、新しいバージョンのセレクターの誤った処理によるものです。 かつては1.3.0との互換性のためのハックがありましたが、私はそれを放棄することを好みました。
最高のドキュメント-使用例：
$( document ).ready( function (){
$( "#search-map" ).Gmap({
//,
show_points: {
lat: "lat" , //name , <input type="hidden" name="lat[0]" />
lng: "lng" , // lat
infowindow: "infowindow" , // lat
// ,
marker: {
icon: "icon" , //name <input type="hidden" name="icon[1]" value="/img/caution.png" />
shadow: "shadow" // marker.icon
},
// API v3
infowindow_options: {
disableAutoPan: true
},
autofit: true , // ,
// ,
icon:{
src: "http://maps.google.com/mapfiles/ms/micons/purple.png" ,
shadow: "http://maps.google.com/mapfiles/ms/micons/pushpin_shadow.png"
},
//
group_markers: true ,
// markermanager
markermanager_options:{
icon: {
src: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.png" ,
shadow: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.shadow.png"
},
cell: {
width: 48,
height: 96
}
}
},
//
geocoder: {
// , , id , innerHtml
clarification: "" ,
//id ,
target: "search_id" ,
//
bounds: {sw: [37, 40], ne: [80, 140]},
//
country: "RU" ,
//
language: "ru" ,
//
success: {
zoom : 8
},
// , - onkeyup onchange
auto: "onkeyup" ,
// , {auto: onkeyup}
delay: 3000,
//
icon: {
src: "http://maps.google.com/mapfiles/ms/micons/question.png" ,
shadow: "http://maps.google.com/mapfiles/ms/micons/question.shadow.png"
},
//id - , , .
track_coordinates:{
lat: "lat" ,
lng: "lng" ,
accuracy: "accuracy" ,
infowindow: " ..." , //
// API v3
marker_options: {
draggable: true
}
}
},
// API v3
initial:{
draggable: true ,
zoom: 5,
center: [58, 35],
mapTypeControl : true ,
scaleControl: true ,
min_zoom: 20 //
}
});
});
* This source code was highlighted with Source Code Highlighter .
おわりに
これは、ジオコーディングの結果を手動で調整する方法です。
デモソースコードupdありがとう、Web開発に移行
upd2間違った影を削除しました