8

私は自分のウェブサイトにグーグルマップを統合しました。Google MapsAPIV3を使用しました。私のウェブサイトをiPhoneなどの携帯電話で表示すると、地図が使用できなくなります。フォントサイズが小さくなりすぎると見づらくなります。マップをさらに拡大すると、フォントサイズがさらに小さくなります。

デスクトップコンピュータで表示すると、地図は読みやすいように見えますが、フォントサイズに満足できず、iPhoneや携帯電話のブラウザではまったく読めません。

私が修正したいのは、1）特にフォントサイズを大きくすることで、マップのサイズが大きく見えるようにすることです。2）地図に通りの名前だけを表示したい。3）マップの読み込みをもっと速くしたい

または、携帯電話のWebサイト専用の他のGoogleマップAPIはありますか？

4

2 に答える 2

16

私は同じ問題を抱えていました、そして私はここで見つけた解決策を実装することになりました：https ://sunpig.com/martin/2012/03/18/goldilocks-and-the-three-device-pixel-ratios/

基本的に、この記事では、物理ピクセルとCSS「ピクセル」の違いについて説明します。2つの間にスケールファクターがあります。ほとんどのモバイルブラウザでのデフォルト値は、デスクトップ用に設計されたページが電話の小さなテキストで非常に「ズームアウト」されているように見えることがよくある理由のようです。そしてそれはまた読めないグーグルマップを引き起こすようです！

このHTMLスニペットを「head」セクションに追加すると、問題は解決しました。

<meta name="viewport" content="width=device-width">
于 2012-11-13T01:20:29.900 に答える
2

  1. これは、Google Maps APIがまだサポートしていない機能、または考慮に入れていない機能のようです。このフォーラム

    のコメントは同じことを述べています。 どうやら通りのラベルは「マップタイルに焼き付けられている」ので、実際にフォントのサイズ/スタイルを変更する方法はありません。リンク切れ＃2 *。

  2. 2番目の質問について：
    ストリートラベルのみを表示したい場合は、GoogleMapsAPIのスタイリングセクションを読むことをお勧めします。このドキュメントを読み終えると、ウィザードの壊れたリンク＃4 *からJSONを簡単に取得できることがわかります。これをマップに追加できます。

    「道路」を除くすべての機能ラベルの可視性をオフに設定するだけです。
    次に、[JSONを表示]をクリックすると、次のようなものが表示されます。

Google Maps API v3スタイルマップJSON：

[
 {
  featureType: "administrative",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "landscape",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "poi",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "transit",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "water",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "road",
  stylers: [
   { visibility: "on" }
  ]
 }
]

これは、ウィザードが提供する 結果のマップの静止画像です。


*レビューから：

2017年の時点で、リンク＃2と＃4は壊れています...

于 2012-06-22T00:26:10.973 に答える