对于谷歌地图标记，是否可以在svg中包含多个颜色

for a google map marker is it possible to incorporate more than one color in an svg

本文关键字：svg 颜色 包含多 是否 于谷歌 谷歌 图标 地图      更新时间：2023-09-26

所以我两天来一直在努力做的是.

    var arr = [
               {
                   path: "M239.68,331.38c34.206,58.142,87.12,150.48,87.12,150.48s49.609-84.922,88.56-149.76C327.52,275.94,241.84,326.34,239.68,331.38z",
                   fillColor: 'red',
                   fillOpacity: 1,
                   anchor: new google.maps.Point(0, 0),
                   strokeWeight: 0,
                   scale: .6,
               },
               {
                   path: "M150 0 L75 200 L225 200 Z",
                   fillColor: 'black',
                   fillOpacity: 1,
                   anchor: new google.maps.Point(0, 0),
                   strokeWeight: 0,
                   scale: .6,
               }
              ];
              var marker = new google.maps.Marker({
                  position: location,
                  map: map,
                  draggable: false,
                  icon: arr,
                  zIndex: -20,
              });

因此，基本上，iv一直在尝试通过组合两个或多个svg并将其用作标记来动态构建svg，这可能吗？有人知道吗？我想设置样式的唯一重要属性是颜色，这样我就有了一个不止一种颜色的标记。

在html中，您将看到您的"svg表示法"转换为实际的svg

有许多库可以让创建SVG变得更容易，或者可以学习如何直接用javascript创建它们。。。这比你想象的要容易，但我对它进行了硬编码，你可以使用标准的DOM getElementById等-轻松地更改SVG中的颜色

例如，查看原始颜色是红色和黑色，以及线

document.getElementById('p1').setAttribute('fill','green');

将红色位设置为绿色-

var map;
var polyLine;
var polyOptions;
function initialize() {
    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(0,0)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    google.maps.event.addListener(map, 'click', function(event) {
        addPoint(event);
    });
}
function addPoint(event) {
    document.getElementById('p1').setAttribute('fill','green');
	var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("marker").innerHTML)
    var icon = {
        url: iconUrl,
        anchor: new google.maps.Point(0,0),
        scaledSize: new google.maps.Size(40,55)
    }
    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable: false,
        icon: icon,
        zIndex : -20
    });
}
initialize();
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&x=.js"></script>
<div id="map-canvas" style="height:400px"></div>
<div id='marker' style='display:none'><svg 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="110mm" height="150mm" 
    id="svg111" 
    version="1.1">
<path id="p1"
    fill="red"
    fill-opacity="1"
    stroke-weight="0" 
    d="M239.68,331.38c34.206,58.142,87.12,150.48,87.12,150.48s49.609-84.922,88.56-149.76C327.52,275.94,241.84,326.34,239.68,331.38z" />
<path id="p2"
    fill="black"
    fill-opacity="1"
    stroke-weight="0" 
    d="M150 0 L75 200 L225 200 Z" />
    </svg></div>

相关文章：