【问题标题】:how to change the color of marker in google map api 3如何更改谷歌地图api 3中标记的颜色
【发布时间】:2011-03-18 09:45:49
【问题描述】:

我正在寻找一种解决方案来更改 API V3 中 Google 地图中制造商的颜色。我想在鼠标悬停时更改制造商的颜色。如果有人得到解决方案,请发布它们,我将非常感谢。提前致谢

【问题讨论】:

    标签: css google-maps


    【解决方案1】:

    您必须自定义标记属性并为此使用自定义标记和阴影图像。但这是在 Map API 2 中,因此提前抱歉。

    var normal_icon = new GIcon();
    normal_icon.image = "images/google_marker_green.png";
    normal_icon.shadow = "images/shadow-google_marker_green.png";
    normal_icon.iconSize = new GSize(20.0, 34.0);
    normal_icon.shadowSize = new GSize(38.0, 34.0);
    normal_icon.iconAnchor = new GPoint(10.0, 17.0);
    normal_icon.infoWindowAnchor = new GPoint(10.0, 17.0);
    
    var hover_icon = new GIcon();
    hover_icon.image = "images/google_marker_blue.png";
    hover_icon.shadow = "images/shadow-google_marker_blue.png";
    hover_icon.iconSize = new GSize(20.0, 34.0);
    hover_icon.shadowSize = new GSize(38.0, 34.0);
    hover_icon.iconAnchor = new GPoint(10.0, 17.0);
    hover_icon.infoWindowAnchor = new GPoint(10.0, 17.0);
    
    var lat="Your lat. point";
    var long="Your long. point";
    
    map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng(lat, long), 15);
    map.setUIToDefault();
    var point = new GLatLng(lat,long);
    var marker = new GMarker(point,normal_icon);
    var message="Custom message";
    GEvent.addListener(marker, "click", function() {
      map.openInfoWindowHtml(point, message);
    });
    map.addOverlay(marker);
    
    function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'mouseover', function() {
            marker.setIcon(hover_icon);
          });
          google.maps.event.addListener(marker, 'mouseout', function() {
            marker.setIcon(normal_icon);
          });
        }
    

    你可以从http://smmtn.com/sandbox/gmaps-marker-hover/找到确切的例子

    感谢和问候

    哈雷什

    【讨论】:

    • 链接未执行...您能提供其他链接吗?
    猜你喜欢
    • 2018-02-16
    • 1970-01-01
    • 2011-01-28
    • 2012-06-19
    • 1970-01-01
    • 1970-01-01
    • 2015-12-15
    • 2018-04-27
    • 1970-01-01
    相关资源
    最近更新 更多