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

Question

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

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 脚本的调色板，当用户选择某种颜色时，它会在页面上改变很多颜色，但我也不知道如何改变这个标记的颜色.

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

Answer 1

如果不参考您的标记，您将无法做到这一点。一旦你有了那个参考，就很容易了：

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

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

Answer 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>

AnotherMapScript.js

<script type="text/javascript">

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

</script>

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

Change Google Map marker color with external jQuery

jquery

google-maps

google-maps-api-3

google-maps-markers

marker