2012-01-23 98 views
2

我必須表明InfoWindon在兩種情況下:上標記 谷歌地圖V3信息窗口不顯示

  • 懸停搜索結果

    • 點擊。

    此外,沒有腳本錯誤顯示,但沒有顯示信息窗口。 這裏是我的代碼:

    var searchResults = {"100065":{"Rank":100065,"ID":100065,"Country":"France","Department":null,"CityName":"Paris","ZipCode":"75019","PropertyType":"Apartment","Title":"Super sweet villa100065","Address":"","Price":45000.0000,"Longitude":2.386708,"Latitude":48.890614,"HideAddress":false,"Zone":null,"IsAgency":true,"Image":null,"ImageContentType":""}}; 
    
    
    var map = null; 
    var imgBluePin = '<%= ResolveUrl("~/images/pin_blue.png") %>'; 
    var imgGreenPin = '<%= ResolveUrl("~/images/pin_green.png") %>'; 
    var bounds = new google.maps.LatLngBounds(); 
    var markers = []; 
    
    function initialize() { 
        var myOptions = { 
         zoom: 8, 
         center: new google.maps.LatLng(47.5200, 2.1959), 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map(document.getElementById('divMap'), myOptions); 
    } 
    
    $(document).ready(function() { 
        ResetMap(); 
    }); 
    
    function ResetMap() { 
        initialize(); 
        showListingsOnMap(); 
    } 
    
    function showListingsOnMap() { 
        for (var index in searchResults) { 
         showAddressesOnMap(
              searchResults[index].ID, 
              searchResults[index].Title, 
              searchResults[index].Image, 
              searchResults[index].ImageContentType, 
              searchResults[index].Latitude, 
              searchResults[index].Longitude, 
              searchResults[index].Address, 
              searchResults[index].CityName, 
              searchResults[index].Zone, 
              searchResults[index].ZipCode, 
              searchResults[index].Country, 
              searchResults[index].IsAgency, 
              searchResults.length); 
        } 
    } 
    
    function GetLocationString(address, city, zone, zip, country) { 
        var locationString = address; 
    
        if (city != undefined && city.length > 0) { 
         locationString += ", " + city; 
        } 
        if (zone != undefined && zone.length > 0) { 
         locationString += ", " + zone; 
        } 
        if (zip != undefined && zip.length > 0) { 
         locationString += ", " + zip; 
        } 
        if (country != undefined && country.length > 0) { 
         locationString += ", " + country; 
        } 
        if (locationString.indexOf(",") == 0) 
         locationString = locationString.substr(2); 
    
        return locationString; 
    } 
    
    function GetContent(title, image, imageType, address) { 
        var content = '<div class="infoPopup">'; 
    
        if (image != null) { 
         content += '<img src="data:' + imageType + ';base64,' + image + '" class="thumb"></img>'; 
        } 
        content += '<p><span class="title">' + title + "</span></p>"; 
        content += '<p>' + address + "</p>"; 
        content += '</div>'; 
    } 
    
    function showAddressesOnMap(appID, title, image, imageType, lat, lng, address, city, zone, zip, country, markerType) { 
    
        if (lat != null && lng != null && lat != "0" && lng != "0") { 
    
         var locationString = GetLocationString(address, city, zone, zip, country); 
    
         displayMarker(appID, title, image, imageType, locationString, markerType, lat, lng); 
        } 
    } 
    
    function displayMarker(appID, title, image, imageType, address, markerType, lat, lng) { 
        var listingLatLng = new google.maps.LatLng(lat, lng); 
        var marker = new google.maps.Marker({ 
         position: listingLatLng, 
         map: map, 
         icon: markerType ? imgBluePin : imgGreenPin, 
         title: title + address 
        }); 
    
        var content = GetContent(title, image, imageType, address); 
    
        AddInfoWindow(marker, map, content); 
    
        bounds.extend(listingLatLng); 
        map.fitBounds(bounds); 
    
        markers.push(marker); 
    } 
    
    function AddInfoWindow(marker, map, content) { 
        var infowindow = new google.maps.InfoWindow({ 
         content: content, 
         size: new google.maps.Size(50, 50) 
        }); 
    
        google.maps.event.addListener(marker, 'click', function() { 
         infowindow.open(map, marker); 
        }); 
    
        marker.info = infowindow; 
    } 
    
        //Called on hover of result item from seach 
    function showInfoWindow(point) { 
        if (map) { 
         var marker = markers[point - 1]; 
         map.setCenter(marker.position); 
         marker.info.open(map, marker); 
        } 
    } 
    

    我檢查這些解決方案 - onetwo和其他一些人,但他們都沒有工作。

  • 回答

    1

    因爲我沒有圖標圖像,所以我在函數中將線條icon: markerType ? imgBluePin : imgGreenPin,註釋掉後,我得到它以顯示標記。

    我在GetContent函數中添加了return content;後顯示了infoBox。

    這裏是的jsfiddle:http://jsfiddle.net/ninty9notout/AcuSv/

    希望這有助於。

    +0

    是的,我忘記了返回內容。這是問題,我看不到它。非常感謝。 – Thea

    +1

    不客氣。祝你的項目好運。 – ninty9notout

    相關問題