谷歌地圖應用程序中的自定義標記

我正在使用谷歌地圖javascript應用程序，我想爲其中一個標記使用自定義圖像。谷歌地圖應用程序中的自定義標記

這裏是我想用來獲取標記的代碼示例。

var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 
GDownloadUrl(searchUrl, function(data) { 
    var xml = GXml.parse(data); 
    markers = xml.documentElement.getElementsByTagName('marker'); 

    var sidebar2 = document.getElementById('sidebar2'); 
    sidebar2.innerHTML = ''; 
    if (markers.length == 0) { 
    document.getElementById('alert_div').innerHTML = "<a>No Results found</a>"; 
    document.getElementById('alert_div').style.display = 'block'; 

    map.setCenter(new GLatLng(40.178873,2.8125), 2); 
    return; 
    } 
    showSidebar(); 
    var limitsearch = document.getElementById('limitsearch').value; 
    var bounds = new GLatLngBounds(); 
    if (limitsearch <= markers.length){ 
    for (var i = 0; i < limitsearch; i++) { 
    var name = markers[i].getAttribute('name'); 
    var phone = markers[i].getAttribute('phone'); 
    if (phone == 0){phone = '';} 
    var address = markers[i].getAttribute('address'); 
    var distance = parseFloat(markers[i].getAttribute('distance')); 
    var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), 
          parseFloat(markers[i].getAttribute('lng'))); 

    var marker = createMarker(point, name, address); 
    map.addOverlay(marker); 
    var sidebarEntry = createSidebarEntry(marker, phone, name, address, distance); 
    sidebar2.appendChild(sidebarEntry); 
    bounds.extend(point); 
    }} 
    else{ 
    for (var i = 0; i < markers.length; i++) { 
    var name = markers[i].getAttribute('name'); 
    var phone = markers[i].getAttribute('phone'); 
    if (phone == 0){phone = '';} 
    var address = markers[i].getAttribute('address'); 
    var distance = parseFloat(markers[i].getAttribute('distance')); 
    var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), 
          parseFloat(markers[i].getAttribute('lng'))); 

    var marker = createMarker(point, name, address); 
    map.addOverlay(marker); 
    var sidebarEntry = createSidebarEntry(marker, phone, name, address, distance); 
    sidebar2.appendChild(sidebarEntry); 
    bounds.extend(point); 
    } 

    } 




    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 
    showSidebar(); 
    getAlert(); 
});

}

來源

2011-05-09 Nobby

「數據」是什麼？你能提供更多你使用的代碼嗎？ – Jonathan 2011-05-09 03:10:19

當然。我正在使用Google地圖商店定位器。我已經編輯我的文章 – Nobby 2011-05-09 03:15:20

您還應該查看谷歌地圖的v3 api。如果您發現它有用，我可以使用v3代碼更新我的答案。 http://code.google.com/apis/maps/documentation/javascript/basics.html – 2011-05-09 03:28:57

這裏是createMarker的替代品，以支持圖標

function createMarker(point, name, address, markerIcon) { 
    var markerOptions = {} 
    if (markerIcon !== undefined) { 
    markerOptions = { icon: markerIcon }; 
    } 
    marker = new GMarker(point, markerOptions); 
    var html = '<b>' + name + '</b> <br/>' + address; 
    GEvent.addListener(marker, 'click', function() { 
    marker.openInfoWindowHtml(html); 
    }); 
    return marker; 
}

然後，您可以在GICON對象傳遞作爲最後的選擇，如果你想要的。你需要將其初始化像這樣：

var myIcon = new GIcon(); 
myIcon.iconSize = new GSize(16, 16); 
myIcon.iconAnchor = new GPoint(4, 7); 
myIcon.image = "http://www.url.com/somepic.png"; 
var marker = createMarker(point, name, address, myIcon);

你需要的大小和位置錨決定

也看到來自谷歌文檔以下資源：

來源

2011-05-09 03:27:42

僅用於收藏圖標？我只想用我自己的圖像替換默認標記 – Nobby 2011-05-09 03:31:02

不，任何圖像都可以使用。我只是使用我的網站的favicon這個特定的標記。 – 2011-05-09 03:31:43

你能編輯我的代碼，告訴我它將如何工作？ – Nobby 2011-05-09 03:36:58

谷歌地圖應用程序中的自定義標記

回答

相關問題