一部のエリアを除き、Googleマップの地図をグレーアウトすることはできますか?


15

私が探しているのは、世界の残りの部分をグレー表示することで、Googleマップの地図上の特定の領域を強調する方法です。

2つのポリゴンのうち1つは表示され、もう1つは表示されず、マップが静的(マップの移動なし)の場合にのみ機能するというソリューションについて聞いたことがあります。ただし、ユーザーが地図をズームおよびドラッグできるようにしたいと思います。

また、ある領域を強調することを考えていない他の方法にも興味があります。

更新:

radekが投稿したソリューションを試してみると(つまり、outerBoundaryIs(ビューよりも大きい)とinnerBoundaryIs(強調する領域)を持つPolygonでKMLを作成する)ズームインすると、長方形の領域がもう周囲のポリゴン。見る:

ここに画像の説明を入力してください

それに対する経験/解決策をお持ちですか?

update2:

Google Fusion Tablesを使用して、radekのソリューションをテストする時間ができました。最初は、KMLと同じようにタイルが見つからないという問題がありました(上の写真を参照)。私は彼のソリューションのjqueryハックがロードされていないタイルを意図していたと感じています:

setTimeout(function(){ 
        $("img[src*='googleapis']").each(function() { 
            $(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime()); 
        }); 
    }, 5000);

更新後にタイルが読み込まれるように思えたので、自分でハックを使用していません。新しいユーザーごとにバグが発生した場合は、それを試してみます。

回答:


18

Google Maps Maniaブログは、スイスの行政境界地図の例を示しています。

ここに画像の説明を入力してください

Vasileのコードはgithubにあります。


1
これは私が探している機能を実際に表示します!私の場合、ソースを簡単に実装できるかどうかを確認するには、ソースに飛び込む必要があります。彼らはハッキングについて話している(私はすぐにIE7の恐怖を感じる)。
mrg

この例では、Google Fusion Tablesを使用する必要がありますか?現時点では使用していません。githubコードをダウンロードして、要件を確認します。
mrg

2
KMLでポリゴンを作成することになります。これは、outerBoundaryIsが世界であり、innerBoundaryIsが関心領域です。透明度のスタイリングが難しいだけでなく、ズームインしても半透明のレイヤーに穴が開いてしまいます。それを経験した人はいますか?
-mrg

1
KMLは読み込みがかなり遅いため、常に変更すると非常に遅延した効果が得られる可能性があります。それとは別に、古いkmlがキャッシュされないように、名前を絶えず変更する必要はありませんか?Google Fusion Tablesの知識が必要だと感じています。
-mrg

1
FusionTablesの代わりにKMLファイルを使用できる、より単純な実装はありますか?1つの連続した領域(都市の境界)をハイライトし、他のすべてをグレーアウトするだけです。Vasileのコードを見てきましたが、それは本当に複雑で、ブラウザーのハッキングに依存しているようです。また、このソリューションが、マップウィンドウをグレーアウト効果の基礎にするというelrobisの提案を使用できる場合、はるかに安定/高速になると思います。{都市の周りに境界線を描いて色を付ける} //完了{境界線の内側の領域を除くすべてを灰色にする} ??????????????
user1845528

3

@radekが投稿したツールが役に立たない場合、プレーンなgoogle.maps.Polygon機能を使用している別のツールがあります:http : //maps.vasile.ch/geomask/

基本的に、ワインディングナンバーアルゴリズムに従います。マスク(ユニバース)ポリゴンは時計回りにデジタル化され、すべての内部ポリゴンは反時計回りにデジタル化されますhttp://en.wikipedia.org/wiki/Winding_number

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.