谷歌地图API 3 - 默认（点）标记的自定义标记颜色

Question

我见过很多类似于此的其他问题（here，here和here），但它们都已接受不能解决我的问题的答案。我发现问题的最佳解决方案是StyledMarker库，它允许您为标记定义自定义颜色，但我无法使用默认标记（您在执行Google地图搜索时获得的标记 - 与中间的一个点），它似乎只提供带有字母的标记或带有特殊图标的标记。

Answer 1

可以动态申请图标图像与网址：

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569 

，看起来像这样：图像是21x34像素和TH Ë销尖部在位置（10，34）

而且你还需要一个单独的阴影图像（使其不重叠附近的图标）：

http://chart.apis.google.com/chart?chst=d_map_pin_shadow 

看起来像这样：图像是40x37像素和当构造的MarkerImage是你需要设置大小和锚点accordingl销尖端处于位置（12，35）

Y：

var pinColor = "FE7569"; 
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
     new google.maps.Size(21, 34), 
     new google.maps.Point(0,0), 
     new google.maps.Point(10, 34)); 
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", 
     new google.maps.Size(40, 37), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(12, 35)); 

然后，您可以用标记添加到您的地图：

 var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(0,0), 
       map: map, 
       icon: pinImage, 
       shadow: pinShadow 
      }); 

简单地用颜色代码你后替换“FE7569”。例如：

信贷由于Jack B Nimble为灵感;）

Answer 2

我用StyledMarker得到的最接近的东西是this。

尽管中间的子弹不像预设的那么大。 StyledMarker类简单地构建这个URL并要求google api创建标记。

从class use example使用“％E2％80％A2”为您的文字，如：

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map}); 

您需要modifiy StyledMarker.js注释掉行：

if (text_) { 
    text_ = text_.substr(0,2); 
    } 

因为这会将文本字符串修剪为2个字符。

另外，您可以创建基于默认的自定义标记图像一个与你的愿望，并覆盖与代码默认的标记，如本的颜色：从Google charts api

marker = new google.maps.Marker({ 
    map:map, 
    position: latlng, 
    icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png', 
    new google.maps.Size(24, 24), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(0, 24) 
) 
}); 

Answer 3

改变它chart.googleapis.com的路径，否则SSL不会如果你使用谷歌地图API的工作

Answer 4

v3你可以使用setIcon例如

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

或者作为标记INIT的一部分：

marker = new google.maps.Marker({ 
    icon: 'http://...' 
}); 

其他颜色：

• Blue marker
• Red marker
• Purple marker
• Yellow marker
• Green marker

使用以下代码段来更新具有不同颜色的默认标记。

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE) 

Answer 5

你可以使用这段代码，它工作正常。

var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br> 

var marker = new google.maps.Marker({ 
      position: yourlatlong, 
      icon: pinImage, 
      map: map 
     }); 

Answer 6

，因为谷歌地图API的3.11版本中，Icon对象替换MarkerImage。 Icon支持与MarkerImage相同的参数。我甚至发现它更简单一点。

一个例子可能是这样的：

var image = { 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(25, 25) 
}; 

进一步的信息check this site

Answer 7

下面是使用Gooogle企业地图API本身就是一个很好的解决方案。没有外部服务，没有额外的图书馆。它可以自定义形状和多种颜色和样式。解决方案是使用矢量标记，其中googlemap API调用Symbols。

除了少数和有限的预定义符号，您可以通过指定SVG路径字符串（Spec）来制作任何颜色的任何形状。

要使用它，而不是将“图标”标记选项设置为图像url，请将其设置为包含符号选项的字典。作为例子，我设法手艺一个符号，它非常类似于标准的标记：

function pinSymbol(color) { 
    return { 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', 
     fillColor: color, 
     fillOpacity: 1, 
     strokeColor: '#000', 
     strokeWeight: 2, 
     scale: 1, 
    }; 
} 

var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(latitude, longitude), 
    icon: pinSymbol("#FFF"), 
}); 

我你小心地保持形状关键点0,0，您就不必定义标记图标为中心的参数。另一个路径例如，同样的标记，而不点：

path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 

在这里，你有一个非常简单的和丑陋的颜色标志：

path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z', 

你也可以使用一个可视化的工具，像Inkscape创建的路径（ GNU-GPL，多平台）。一些有用的提示：

• 谷歌API只接受一个路径，所以你必须把任何其他对象（方形，色格拉...）为路径，并加入他们作为一个单一的一个。 Path菜单中的两个命令。
• 要移动路径（0,0），进入路径编辑模式（F2），选择所有 控制节点和拖动它们。用F1移动对象，不会改变路径节点坐标。
• 为确保参考点位于（0,0）处，您可以单独选择它并在顶部工具栏上手动编辑坐标。
• 保存SVG文件，它是一个XML后，用编辑器打开它，寻找SVG：路径元素并复制“d”属性的内容。

Answer 8

在Internet Explorer中，this solution不SSL工作。

人们可以看到错误控制台为：

SEC7111：HTTPS安全受到损害this，

解决方法：由于这里建议更换 chart.apis用户之一。 google.com至chart.googleapis.com为URL路径，以避免SSL错误。

Answer 9

使用SWIFT和谷歌地图API V3，这是我能够做到这一点的最简单的方法：

icon = GMSMarker.markerImageWithColor(UIColor.blackColor()) 

希望它可以帮助别人。

Answer 10

嗨，你可以使用图标作为SVG并设置颜色。看到这个代码

/* 
 
* declare map and places as a global variable 
 
*/ 
 
var map; 
 
var places = [ 
 
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"], 
 
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"], 
 
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"], 
 
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"], 
 
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"] 
 
]; 
 
/* 
 
* use google maps api built-in mechanism to attach dom events 
 
*/ 
 
google.maps.event.addDomListener(window, "load", function() { 
 

 
    /* 
 
    * create map 
 
    */ 
 
    var map = new google.maps.Map(document.getElementById("map_div"), { 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    }); 
 

 
    /* 
 
    * create infowindow (which will be used by markers) 
 
    */ 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    /* 
 
    * create bounds (which will be used auto zoom map) 
 
    */ 
 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    /* 
 
    * marker creater function (acts as a closure for html parameter) 
 
    */ 
 
    function createMarker(options, html) { 
 
     var marker = new google.maps.Marker(options); 
 
     bounds.extend(options.position); 
 
     if (html) { 
 
      google.maps.event.addListener(marker, "click", function() { 
 
       infoWindow.setContent(html); 
 
       infoWindow.open(options.map, this); 
 
       map.setZoom(map.getZoom() + 1) 
 
       map.setCenter(marker.getPosition()); 
 
      }); 
 
     } 
 
     return marker; 
 
    } 
 

 
    /* 
 
    * add markers to map 
 
    */ 
 
    for (var i = 0; i < places.length; i++) { 
 
     var point = places[i]; 
 
     createMarker({ 
 
      position: new google.maps.LatLng(point[2], point[3]), 
 
      map: map, 
 
      icon: { 
 
       path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z", 
 
       scale: 0.6, 
 
       strokeWeight: 0.2, 
 
       strokeColor: 'black', 
 
       strokeOpacity: 1, 
 
       fillColor: point[4], 
 
       fillOpacity: 0.85, 
 
      }, 
 
     }, point[1]); 
 
    }; 
 
    map.fitBounds(bounds); 
 
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div id="map_div" style="height: 400px;"></div>

Answer 11

这些服装圆形标记

small_red：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC 

small_yellow：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg== 

small_green：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg== 

small_blue：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC 

small_purple：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg== 

他们是9x9的PNG图像。

一旦他们在你的页面上，你可以拖动他们，你会有实际的PNG文件。

Answer 12

我已经将vokimon's answer稍微扩展了一点，使它对于更改其他属性也更方便一些。

function customIcon (opts) { 
    return Object.assign({ 
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', 
    fillColor: '#34495e', 
    fillOpacity: 1, 
    strokeColor: '#000', 
    strokeWeight: 2, 
    scale: 1, 
    }, opts); 
} 

用法：

marker.setIcon(customIcon({ 
    fillColor: '#fff', 
    strokeColor: '#000' 
})); 

或定义一个新的标记时：

const marker = new google.maps.Marker({ 
    position: { 
    lat: ..., 
    lng: ... 
    }, 
    icon: customIcon({ 
    fillColor: '#2ecc71' 
    }), 
    map: map 
}); 

Answer 13

我尝试两种方法来创建自定义谷歌地图标记，使用该运行代码canvg.js是对浏览器的最佳兼容性。已注释的代码并不支持IE11。

var marker; 
 
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14]; 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 13, 
 
    center: { 
 
     lat: 59.325, 
 
     lng: 18.070 
 
    } 
 
    }); 
 
    var markerOption = { 
 
    latitude: 59.327, 
 
    longitude: 18.067, 
 
    color: "#" + "000", 
 
    text: "ha" 
 
    }; 
 
    marker = createMarker(markerOption); 
 
    marker.setMap(map); 
 
    marker.addListener('click', changeColorAndText); 
 
}; 
 

 
function changeColorAndText() { 
 
    var iconTmpObj = createSvgIcon("#c00", "ok"); 
 
    marker.setOptions({ 
 
       icon: iconTmpObj 
 
      }); 
 
}; 
 

 
function createMarker(options) { 
 
    //IE MarkerShape has problem 
 
    var markerObj = new google.maps.Marker({ 
 
    icon: createSvgIcon(options.color, options.text), 
 
    position: { 
 
     lat: parseFloat(options.latitude), 
 
     lng: parseFloat(options.longitude) 
 
    }, 
 
    draggable: false, 
 
    visible: true, 
 
    zIndex: 10, 
 
    shape: { 
 
     coords: CustomShapeCoords, 
 
     type: 'poly' 
 
    } 
 
    }); 
 

 
    return markerObj; 
 
}; 
 

 
function createSvgIcon(color, text) { 
 
    var div = $("<div></div>"); 
 

 
    var svg = $(
 
    '<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' + 
 
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' + 
 
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' + 
 
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' + 
 
    '</svg>' 
 
); 
 
    div.append(svg); 
 

 
    var dd = $("<canvas height='50px' width='50px'></cancas>"); 
 

 
    var svgHtml = div[0].innerHTML; 
 

 
    //todo yao gai bu dui 
 
    canvg(dd[0], svgHtml); 
 

 
    var imgSrc = dd[0].toDataURL("image/png"); 
 
    //"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize 
 
    //var svg = '<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' 
 
    // + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' 
 
    // + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' 
 
    // + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' 
 
    // + '</svg>'; 
 
    //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg); 
 

 
    var iconObj = { 
 
    size: new google.maps.Size(32, 43), 
 
    url: imgSrc, 
 
    scaledSize: new google.maps.Size(32, 43) 
 
    }; 
 

 
    return iconObj; 
 
};

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Your Custom Marker </title> 
 
    <style> 
 
    /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    /* Optional: Makes the sample page fill the window. */ 
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    <script src="https://canvg.github.io/canvg/canvg.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
</body> 
 

 
</html>