更改谷歌地图标记答案

【问题标题】：Change Google map marker更改谷歌地图标记
【发布时间】：2011-01-26 06:48:59
【问题描述】：

我如何在谷歌地图中更改我的标记。是否可以将我们的客户图像添加到地图？

谢谢，伴侣

【问题讨论】：

在提出明显问题之前请阅读文档。

标签： google-maps

【解决方案1】：

真的很简单 - 见http://code.google.com/intl/en-US/apis/maps/documentation/javascript/overlays.html#SimpleIcons

直接来自谷歌文档的示例

var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});

如果你想做更复杂的事情，你也可以扩展 google 的覆盖类并执行自定义渲染......

【讨论】：

【解决方案2】：

这是我使用自己定制设计的标记代替 Google 的默认标记的一种方式。

添加这行代码：

 var icon = new GIcon();
      icon.image = "http://yourwebsite.com/logo.png";
      icon.shadow = "http://youwebsite.com/shadow.png";
      icon.iconSize = new GSize(50, 28);
      icon.shadowSize = new GSize(68, 28);
      icon.iconAnchor = new GPoint(37, 59);
      icon.infoWindowAnchor = new GPoint(31, 8);

如有必要，请调整 iconSize 和 shadowSize 的 GSize。括号中的第一个数字定义标记的宽度，第二个数字定义高度（均以像素为单位）。

现在，添加这行代码：

var marker = new GMarker(point, icon);

就在这一行之后：

function createMarker(point, name, address)

希望对您有所帮助！您可以在 http://icode4you.net/developing-a-custom-store-locator-map-using-your-own-custom-markers-instead-of-googles-default-markers 看到我写的一篇博文，如果您有任何问题或问题，请发表评论。

【讨论】：

【解决方案3】：

是的，你绝对可以：

试试这个

var map = new GMap2(document.getElementById("YOUR MAP ID"));

var icon = new GIcon();
icon.image = "IMAGE PATH - RELETIVE OR ABSOLUTE";
icon.iconSize = new GSize(25, 30);
icon.iconAnchor = new GPoint(6, 20);

var marker = new GMarker(new GLatLng(Latitude, Longitude), { draggable: false, title: YOURTITLEHERE, icon: icon });
map.addOverlay(marker);

【讨论】：

感谢您的帮助，我已经添加了您的代码，但现在我得到了两个标记，默认气球标记和我添加的自定义标记。我如何删除默认标记。
如何添加默认标记？您可以编辑您的问题以包含您的代码吗？
嗨，我已经将图像附加到我的标记上，但是当我使用自定义图标更改标记时，单击标记时图像不显示。您知道是什么问题吗？

【解决方案4】：

从 Google Map API V2 开始，这也可以通过对象 MarkerOptions 轻松完成：

map.addMarker(new MarkerOptions()
       .position(new LatLng( ...your_lat...  ,  ...your_long... ))
       .title( "marker title" )
       .icon( BitmapDescriptorFactory
           .fromResource( R.drawable.custom_icon )));

希望这会有所帮助！

【讨论】：

【解决方案5】：

或者你可以

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

或作为标记初始化的一部分：

marker = new google.maps.Marker({
    icon: 'http://...'
});

【讨论】：