谷歌地图应用程序中的自定义标记

我正在使用谷歌地图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

谷歌地图应用程序中的自定义标记

回答

相关问题