添加我自己的谷歌地图图标,而不是默认的谷歌地图标记

时间:2016-02-18 07:50:57

标签: javascript google-maps google-maps-api-3

当我添加新事件时,它会在谷歌地图上显示该事件的位置,并显示谷歌默认标记,但我必须使用我自己的图标更改默认图标。 我想在谷歌地图上添加我自己的图标而不是默认的谷歌标记。这可能吗?

2 个答案:

答案 0 :(得分:1)

非常简单。您可以为标记的icon属性指定任何图片网址,例如在这里,我使用了谷歌的替代品,但这可以很容易地成为您自己服务器上图像文件的路径:

var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
    map: map
});

答案 1 :(得分:0)

这非常有用。您可以使用Google Api来完成此操作。地图api不是最容易使用的东西。我发现谷歌设置Api是困难的部分。通常连接后,他们会很好地记录代码。

你可以在这里做, This Link

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}