0

私はjavascriptの初心者だと言って始めなければなりません....

stackoverflow.com の次の質問からコード例を借りました。

Google Maps JS API v3 - カスタム マーカーを使用した単純な複数マーカーの例

問題は、infoWindow にスタイリングを追加したときに、ホバーにすべての html ガベージが表示されることです。

リンク: http://www.conleym.com/map/google_maps_code_10_zoom_working.html

だから私の質問は - ホバーのスタイル情報を削除する簡単な方法はありますか、それともホバーを無効にしてユーザーに表示されないようにする方法はありますか?

これが私が使用したものの例です：

['<a style="font-family: Arial" href="http://www.mfah.org/" target="_blank"><b>The Holocaust Museum</b></a><br><span style="font-size: 12px; font-family: Arial;">1001 Bissonnet Street<br> Houston, TX 77005<br>(713) 639-7300<br></span>', 29.725472,-95.386033, 4, 'http://www.conleym.com/map/icons/star-3.png'],

助けてくれてありがとう。

4

2 に答える 2

1

このcreateMarker関数は、実際にはプレーン テキスト タイトルのマーカー用に設計されています。link (URL)、address、およびphoneという追加情報に対応するように、その関数を変更することをお勧めします。

myTitle情報ウィンドウとホバー テキスト (タイトル)の両方に同じものを使用する代わりにcontentString、指定されたタイトル、リンク、アドレス、および電話番号に基づいて、関数内で HTML マークアップを作成する必要があります。createMarker関数は次のようになります。

function createMarker(latlng, myTitle, myLink, myAddress, myPhone, myNum, myIcon) {
    var contentString = '<a style="font-family: Arial" href="' +
        myLink + '" target="_blank">' + myTitle +
        '</a><br><span style="font-size: 12px; font-family: Arial;">ADDRESS<br> ' +
        myAddress + '<br>PHONE<br>' + myPhone + '</span>';

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: myIcon,
        zIndex: Math.round(latlng.lat() * -100000) << 5,
        title: myTitle,
    });

    // ...

関数の呼び出しを更新して、正しい引数を渡す必要があります。

createMarker(new google.maps.LatLng(locations[i][4], locations[i][5]), locations[i][0], locations[i][1], locations[i][2], locations[i][3], locations[i][6], locations[i][7]);
  • location[i][0]場所の名前/タイトルです
  • location[i][1]リンクです
  • location[i][2]住所です
  • location[i][3]電話番号です
  • location[i][4]はその場所の緯度です
  • location[i][5]場所の経度です
  • location[i][6]（実際にはmyNumどこでも使用されていません）
  • location[i][7]マーカーアイコンへのURLです

これで、データ ソースをよりきれいにエンコードできるようになりました。例えば：

var locations = [    

//====================== ZONE 1 MUSEUMS  ==========================
//THE MENIL COLLECTION  
    ['The Menil Collection', 'http://www.mfah.org/', 'Houston TX 77006', '(713) 639-7300', 29.737593,-95.398525, 1, 'http://www.conleym.com/map/icons/world.png'],

//ROTHKO CHAPEL 
    ['Rothko Chapel', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.737822,-95.395725, 2, 'http://www.conleym.com/map/icons/world.png'],

//HOUSTON CENTER for PHOTOGRAPY 
    ['Houston Center for Photography', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.738606,-95.397179, 3, 'http://www.conleym.com/map/icons/world.png'],


// and so on...

];

デモ: 前と後

于 2012-12-05T18:47:10.083 に答える
0

HTML 要素 (またはマーカー) の title プロパティは、HTML マークアップをサポートしていません。タイトルと InfoWindow HTML コンテンツに同じ文字列を使用しないでください。配列に別の要素を追加し、そこにタイトルを入れてマーカーの title プロパティで使用し、現在の HTML を InfoWindow に入れます。

function createMarker(latlng, myTitle, myNum, myIcon) {
  var contentString = myTitle;        <-------------------- this appears in the InfoWindow
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: myIcon,
    zIndex: Math.round(latlng.lat() * -100000) << 5,
    title: myTitle,    <------------------------------------------- this is the tooltip
                                                                    appears on mouseover
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });

  markerArray.push(marker); //push local var marker into global array
}  <---------------------------------------------------------this close "}" is missing

createMarker 関数にたくさんのゴミ (ポリゴン定義) が含まれているようですが、マーカーを追加するたびに追加するのではなく、一度だけ追加したいのです。

于 2012-12-05T18:49:16.393 に答える