サンドボックスリンクのマップに関する新しいトピックに気付いたところです。
Googleカードとのコミュニケーションの経験でこれを補おうとします。
前戯
顧客がGoogleマップを接続したいプロジェクトがありますが、デザイン要素は必ずカードで使用する必要があります。 たぶん不十分に検索したかもしれませんが、ドキュメントでもインターネットでも、マップ上のカスタム要素の作成に関する多かれ少なかれ価値のある出版物を見つけました。 カードの接続方法とマーカーの初期化方法の説明のみ。
同時に、Google Maps拡張機能の大部分はGoogle Map API v2用であり、マップをサイトに統合するためのキーが必要でした。
ラベル
マーカーから始めます-多かれ少なかれ、マップにカスタムマーカーを挿入する機会があります。
カスタムマーカーにより、マーカーの画像テキストとスタイルを設定する機能を理解しています。
写真を見ると、すべてが非常に簡単です。 私が最初に出会ったのはこのサービスでした。
すべてが非常に簡単です-写真を選択します-コードを取得します。 少しプレイして、マーカーをホバーしました。
たとえば、マーカーがグレーで、ポイントすると青に変わります。
new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,0),
new google.maps.Point(0,33)
);
* This source code was highlighted with Source Code Highlighter .
API
MarkerImage（url：文字列、サイズ？：サイズ、原点？：ポイント、アンカー？：ポイント、scaledSize ?:サイズ）
私の例では：
-最初のパラメーターは画像へのパスです
-マーカーのピクセル単位のサイズ
-マーカー画像の配置（正方形のマーカーが33px、画像が33x66の場合-2つの状態は通常であり、状態はホバーです）
-マーカーの中心（0、33）-左下隅。 （0、17）下部中央など
そうする：マーカーにカーソルを合わせる-マーカーにハンドラーを置くことができます
例
var myLatlng = new google.maps.LatLng(50.022451, 36.227070);
var myOptions = {
zoom: 10,
scrollwheel: false ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
}
var map = new google.maps.Map( document .getElementById( "map_canvas" ), myOptions);
var markerImage = new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,0),
new google.maps.Point(0,33)
);
var markerImageHover = new google.maps.MarkerImage(
'images/bg-num.png' ,
new google.maps.Size(33,33),
new google.maps.Point(0,33),
new google.maps.Point(0,33)
);
var marker = new google.maps.Marker({
icon: markerImage,
position: myLatlng,
map: map,
title: "Hello World!"
});
google.maps. event .addListener(marker, 'mouseover' , function () {
marker.setIcon(markerImageHover);
});
google.maps. event .addListener(marker, 'mouseout' , function () {
marker.setIcon(markerImage);
});
* This source code was highlighted with Source Code Highlighter .
最初の問題
これまではすべてうまくいきましたが、ページ上にそのようなマーカーが12個あり、マーカーに番号を付けるか署名する必要があります。
2つのオプションがあります-テキストが既に適用されているマーカーに画像を使用する最初のオプション
このようなもの：
for ( var i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage( 'marker' + i + '.png' ,
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
}
* This source code was highlighted with Source Code Highlighter .
別のGoogleサービスGoogleのChart APIを使用する2番目の方法。 特にDynamic Icons 。
var links = [];
for ( var i = 1; i < 3; i++) {
link.push( 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=' + i + '|FF0000|000000' );
};
console.log(link); //[ "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000" , "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=2|FF0000|000000" , "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000" ]
* This source code was highlighted with Source Code Highlighter .
私はそれらをより慎重に扱う時間はありませんでしたが、移動中に自分の写真を置いてもうまくいかないという問題を既に見ました。
一般に、出力はカスタムツールチップでした。
Googleマップのツールチップ
ツールチップ-これは、マーカーをホバー/クリックするとマーカーの横に表示されます。
Google APIはこのためにInfoWindowを使用します。
var infowindow = new google.maps.InfoWindow({
content: 'Hello world'
});
* This source code was highlighted with Source Code Highlighter .
主なオプション：
disableAutoPanブール値-ツールチップが表示された後、カードは中央に配置されるかどうか
maxWidth pxウィンドウサイズ
コンテンツコンテンツ-ツールチップに表示されるもの。 HTMLからJavascriptまで何でもかまいません。
var content = document .createElement( 'div' );
content.innerHTML = "<strong>Hello world</strong> + JS ^_^" ;
var infowindow = new google.maps.InfoWindow({
content: content
});
google.maps. event .addListener(marker, 'click' , function () {
infowindow.open(map, marker);
});
* This source code was highlighted with Source Code Highlighter .
しかし 、これだけでは、このツールチップから「ラッパー」を削除する方法はありません。同じ白い丸いボールと、新しいツールとクールなツールチップのデザイン全体が標準のものにラップされます。 これは私たちには合いません。
ソリューションを探しているときに、InfoWindowとMarkerの両方のいくつかの「拡張機能」に出会いました
これらのプラグインの1つは、仕上げ後に私のニーズに合わせて接続されました。
また、このような編集につまずいたのは、カード用の2つのプラグインです。
実際、Labelプラグインを完成させた後、カスタムマーカーとカードのカスタムツールチップの両方を使用して、
例：
マーカーbuzテキスト+通常のツールチップ
私のカスタム （あまりにも解雇されないように、スタイルの半分を削除しました）
アーカイブ
コードは良いふりをしていない+おそらく最終的なものがあるかもしれないが、うまくいくので彼のおかげだ。
PS記事はすでに大きすぎるので、アーカイブ内のコードを解析できません。 はい、仕事を辞める時です。
PSSは批判し始め、あなたの経験を共有してキックします