添加自定义谷歌地图标记/图钉（颜色）

Question

我已经成功地进行了一些谷歌地图的自定义；但我想知道在哪里或者如何添加代码以改变地图标记、图钉或者图标。我真的只想改变颜色，但如果必要我会创建一个新图像来实现。

以下是我的工作内容，祝好运/

window.onload = function() {  

function initialize() {
    var stylez = [
      {
        featureType: "all",
        stylers: [
          { hue: "#c3c367" },
          { saturation: -75 }
        ]
      },
      {
        featureType: "poi",
        elementType: "label",
        stylers: [
          { visibility: "off" }
        ]
      }
    ];

    var latlng = new google.maps.LatLng(34.101958, -118.327925), // toggle per data

        mapOptions = {
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, "Edited"] 
            },
            zoom: 14,
            center: latlng
        },

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),

        styledMapType = new google.maps.StyledMapType(stylez, {name: "Edited"}),

        marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            animation: google.maps.Animation.DROP,
            title:"Hello World!"
        }),

        infowindow = new google.maps.InfoWindow({
            content: "<div><img width='50' height='50' src='assets/icos/homico.png'</div>"
        });

        map.mapTypes.set("Edited", styledMapType);
        map.setMapTypeId('Edited');

    function toggleBounce () {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    // Add click listener to toggle bounce
    google.maps.event.addListener(marker, 'click', function () {
        toggleBounce();
        infowindow.open(map, marker);
        setTimeout(toggleBounce, 1500);
    });
}

// Call initialize -- in prod, add this to window.onload or some other DOM ready alternative
initialize();

};

- Coastal-Cam

Answer 1

你只需要添加 < /p >。

"icon": "url"

添加到您的标记声明中。因此，这样做：

marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        animation: google.maps.Animation.DROP,
        title:"Hello World!"
    })

Becomes:

marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        icon: yourIconUrl,
        animation: google.maps.Animation.DROP,
        title:"Hello World!"
    })

- ChrisSwires

Answer 2

我已经在这里回答了一个类似的问题：here，它解决了你的问题吗？

你可以使用以下URL自定义自己的标记：

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000

chld参数是您想要在标记中显示的字母。
在管道符后，第一个RGB代码是标记的颜色，第二个是标记的背景颜色。最后一个是可选的。

因此，您可以像这样创建您的标记：

var myPin= new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000");

并且您可以按照自己的需求使用它！

- AlexB

Answer 3

您需要创建一个MarkerImage：

var image = new google.maps.MarkerImage(img_path+'marker.png',
    // This marker is 48 pixels wide by 48 pixels tall.
    new google.maps.Size(24, 24),
    // The origin for this image is 0,0.
    new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 12,24.
    new google.maps.Point(12, 24)
);

图片的尺寸和锚点会将您的自定义图标放在正确的位置

创建标记时，请指定图标：

var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: image,
      //(...)
});

- Guilherme

Answer 4

在react-native-map中，有一个pinColor属性，用于控制图钉的颜色。

<Marker
  pinColor={isActive ? 'yellow' : 'red'}
  key={`${markerId}-${isActive ? 'active' : 'inactive'}`}
  // ... other props ...
/>

- Bill Zelenko