7

正常に動作する Google マップがありますが、マーカーをクリックして情報ウィンドウを開くと、そのマーカー (およびマップ) が画面の中央に表示されるように微調整する必要があります。これは、情報ウィンドウが直接フォーカスされるようにするためです。

役立つ場合は、Infobox.jsを使用して情報ウィンドウを作成しています。オフセットを使ってみた

pixelOffset: 新しい google.maps.Size(-97, -20)

ただし、マーカーを開いたときに情報ウィンドウまたはマップが中央に配置されず、正確ではありません。

私のコード（ライブ例）：

var ib = new InfoBox();

function initialize() { 
var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(52.204872,0.120163),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

    google.maps.event.addListener(map, "click", function() { ib.close() });

setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
    content: "loading..."

});
}

var sites = [
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600 <br/> <a href="http://www.frontroomcambridge.com/">Website</a></p>'],
['Fitzwilliam Museum',52.199678,0.119931, 2, '<p>Fitzwilliam Museum <br/>Trumpington St, Cambridge, CB2 1RB <br/>01223 332900 <br/> <a href="http://www.fitzmuseum.cam.ac.uk/">Website</a></p>'],
['Wysing Arts centre', 52.182077,-0.06977, 3, '<p>Wysing Arts Centre <br/>Fox Rd, Cambridge <br/>CB23 2TX <br/>01954 718881 <br/> <a href="http://www.wysingartscentre.org/">Website</a></p>']
];

function createMarker(site, map){
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
    position: siteLatLng,
    map: map,
    title: site[0],
    zIndex: site[3],
    html: site[4],
    icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-dot.png"
});

var boxText = document.createElement("div");
boxText.style.cssText = "margin-top: -200px; height:200px; background: white; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;";
boxText.innerHTML = marker.html;

var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-97, -20)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('http://visualartscambridge.org/wp-content/uploads/2013/03/box-marker.png') no-repeat"
          ,width: "195px"
         }
        ,closeBoxMargin: "-185px 12px 200px 2px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(0, 250)
        ,isHidden: false
        ,alignBottom: true
        ,pane: "floatPane"
        ,enableEventPropagation: false
};

google.maps.event.addListener(marker, "click", function (e) {
 ib.close();
 ib.setOptions(myOptions);
 ib.open(map, this);
});
return marker;
}

function setMarkers(map, markers) {

for (var i = 0; i < markers.length; i++) {
createMarker(markers[i], map);
}
}

google.maps.event.addDomListener(window, 'load', initialize);
4

1 に答える 1

21

マーカー クリック リスナーに google.maps.Map.setCenter への呼び出しを追加します。これにより、マップがマーカーの中央に配置されます。

google.maps.event.addListener(marker, "click", function (e) {
 ib.close();
 ib.setOptions(myOptions);
 ib.open(map, this);
 map.setCenter(this.getPosition());
});

上記のコードは、新しい場所に即座にジャンプします。よりスムーズなアニメーションが必要な場合map.panTo(this.getPosition());は、map.setCenter(this.getPosition());

于 2013-04-11T10:26:43.997 に答える