使用外部 jQuery 更改 Google 地图标记颜色答案

【问题标题】：Change Google Map marker color with external jQuery使用外部 jQuery 更改 Google 地图标记颜色
【发布时间】：2015-07-22 00:34:43
【问题描述】：

我正在使用这个函数来绘制标记：

function pinSymbol(color) {
    return {
        path: 'M31.5,0C14.1,0,0,14,0,31.2C0,53.1,31.5,80,31.5,80S63,52.3,63,31.2C63,14,48.9,0,31.5,0z M31.5,52.3 c-11.8,0-21.4-9.5-21.4-21.2c0-11.7,9.6-21.2,21.4-21.2s21.4,9.5,21.4,21.2C52.9,42.8,43.3,52.3,31.5,52.3z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 0,
        scale: 1,
   };
}

这是我的标记：

var marker = new google.maps.Marker({
position: map.getCenter(),
icon: pinSymbol("#fff"), //defined marker color
labelText: 'HERE WE ARE',
labelVisible: true,
labelClass: "label",
labelZIndex: 99,
draggable: false,
map: map
});

我在其他文件中有一个带有 jQuery 脚本的调色板，当用户选择某种颜色时，它会在页面上更改很多颜色，但我也不知道如何更改此标记的颜色。

我可以在其他文件中以某种方式在外部更改标记的颜色吗？

【问题讨论】：

有颜色选择器的文件有点击事件吗？你也可以展示一下吗？

标签： jquery google-maps google-maps-api-3 google-maps-markers marker

【解决方案1】：

如果没有对您的标记的引用，您将无法做到这一点。只要你有那个参考，就很容易了：

marker.setIcon(pinSymbol('#f00'));

https://developers.google.com/maps/documentation/javascript/reference#Marker

【讨论】：

你能帮我参考一下标记或给我一些例子吗？
从上面的代码中，标记引用是变量marker。您是否将这些标记存储在某处（在数组或对象中）以便以后可以访问它们？还是您只是创建它们而不对从new google.maps.Marker({...}) 返回的var marker 做任何事情？
我只是创建了 infoBox：var ibLabel = new InfoBox(infowindow); ibLabel.open(map,marker); 没有别的。

【解决方案2】：

当您在 javascript 中使用 var 关键字创建变量时，它是一个局部变量。如果您想从另一个 javascript 文件中访问该变量，则需要传递此引用或使用全局变量。使用全局变量方法，最容易理解但从长远来看最难维护，您可以执行以下操作：

CreateMap.js

<script type="text/javascript">

function pinSymbol(color) {
    return {
        path: 'M31.5,0C14.1,0,0,14,0,31.2C0,53.1,31.5,80,31.5,80S63,52.3,63,31.2C63,14,48.9,0,31.5,0z M31.5,52.3 c-11.8,0-21.4-9.5-21.4-21.2c0-11.7,9.6-21.2,21.4-21.2s21.4,9.5,21.4,21.2C52.9,42.8,43.3,52.3,31.5,52.3z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 0,
        scale: 1,
   };
}
  function initialize() {
    var mapOptions = {
      center: { lat: -34.397, lng: 150.644},
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    var marker = new google.maps.Marker({
        position: map.getCenter(),
        icon: pinSymbol("#fff"), //defined marker color
        labelText: 'HERE WE ARE',
        labelVisible: true,
        labelClass: "label",
        labelZIndex: 99,
        draggable: false,
        map: map
    });

    // global variables set
    window.currentMap = map;
    window.mainMarker = marker;


  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

另一个MapScript.js

<script type="text/javascript">

    var marker = window.mainMarker;
    marker.setIcon(pinSymbol('#f20'));

</script>

【讨论】：