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();

};

Answer 1

您只需添加

即可

"icon": "url"

到您的标记声明。所以这个：

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

成为：

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

Answer 2

我已经回答了类似问题here，它是否解决了您的问题？

您可以使用以下网址自定义自己的标记：

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");

并按照您的意愿使用它！

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,
      //(...)
});

Answer 4

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

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

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

4 个答案: