谷歌地圖信息框在自定義HTML標記

我試圖在單擊覆蓋（自定義HTML標記）後打開信息框。谷歌地圖信息框在自定義HTML標記

此地圖顯示了一個典型的標記和客戶HTML標記。當我點擊典型標記時，信息框將正確打開。當我單擊自定義HTML標記時，信息框無法打開，並顯示錯誤消息：TypeError: anchor.getPosition is not a function。這與我傳遞給infobox.open()的不正確參數有關。它需要一個標記，但是由於我點擊覆蓋圖（自定義HTML標記），傳遞的參數不正確。

如何調整infobox.open()函數，使其能夠接受我的覆蓋圖作爲參數？自定義HTML標記腳本

<!DOCTYPE html> 
<html> 
<style> 

#map{ 
    height: 600px; 
    width: 600px; 
} 

</style> 
<body> 
<div id="map"></div> 

<script src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
<script src="....path/to/custom-html-markers-google-maps.js"></script> 
<script> 

var infobox = new InfoBox({ 
    disableAutoPan: false, 
    maxWidth: 300, 
    pixelOffset: new google.maps.Size(-75, -70), 
    zIndex: null, 
    boxStyle: {width: '150px'}, 
    infoBoxClearance: new google.maps.Size(15, 50) 
}); 


function initialize() { 

    var loc =  new google.maps.LatLng(-33.89, 151.26); 
    var locMarker = new google.maps.LatLng(-33.89, 151.23); 

    var map = new google.maps.Map(document.getElementById("map"), { 
     zoom: 12, 
     center: loc, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    //This works FINE.. It sets the marker and infobox listener 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: locMarker, 
     visible: true 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infobox.setContent('<div style="background-color:yellow">This is<br>an infobox.</div>'); 
     infobox.open(map, this); 
    }); 


    //Overlay from: http://humaan.com/custom-html-markers-google-maps/ 
    var overlay = new CustomMarker(loc, map, {marker_id: '123'}); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</body> 
</html>

部分：

google.maps.event.addDomListener(div, "click", function(event) { 

    infobox.setContent('<div style="background-color:yellow">Hi there</div>'); 
    infobox.open(map, this); //*******THIS IS THE PROBLEM******** 

    google.maps.event.trigger(self, "click"); 
});

我的問題是infobox.open(map, this);期待一個標誌，我給它的「分區」。我怎樣才能調整這個功能，以便它接受我的div？

完整的腳本：http://humaan.com/custom-html-markers-google-maps/

來源

2016-02-26 Bxx

要使用什麼作爲標記錨，它需要暴露出的latLng位置屬性和一個可選的anchorPoint財產。

從the documentation：

開（地圖：地圖| StreetViewPanorama的，主播：？？MVCObject）

返回值：無

打開指定的地圖上此信息窗口，。可選地，InfoWindow可以與錨點關聯。在覈心API中，唯一的錨是Marker類。但是，錨點可以是任何MVCObject，它公開LatLng position屬性和可選的Point anchorPoint屬性以計算pixelOffset（請參閱InfoWindowOptions）。 anchorPoint是從錨的位置到InfoWindow的頂端的偏移量。

來源

2016-02-26 23:19:13 geocodezip

謝謝，修訂被帶入該函數的經緯度位置和地圖變量。 – Bxx

我沒有攜帶正確的祿（緯度/經度）和地圖入函數調用。

這裏是修改後的監聽器：

google.maps.event.addDomListener(div, "click", function(event) { 

    var map = self.getMap(); 
    var loc = self.latlng; 

    infobox.setContent('<div style="background-color:yellow">Hi there</div>'); 
    infobox.openRevised(map, this, loc); 

    google.maps.event.trigger(self, "click"); 
});

這裏是訂正infobox.open()功能：

InfoBox.prototype.openRevised = function (map, anchor, loc) { 

    if (anchor) { 

     this.position_ = loc; 
    } 

    this.setMap(map); 
};

來源

2016-02-27 00:12:39 Bxx

谷歌地圖信息框在自定義HTML標記

回答

相關問題