Google 地图：如何更改标记的默认红色并添加标签

Question

我觉得一开始应该很容易。然而我在网上找了好几个小时也没有得到解决方案。

我可以在带有标签的 Google 地图上添加标记，如下所示：

// Adding a marker to the map 
    var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(22.48, 114.20),
    map: map,
    title: 'My House',
    label: {
        text: 'A',
        color: '#79E149'
    }
});

默认颜色为红色。

我的问题：如何将 Marker 的红色更改为其他颜色，例如绿色？

我注意到大多数答案都建议使用外部图标，例如：

// Adding a marker to the map 
    var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(22.48, 114.20),
    map: map,
    title: 'My House',
    **icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',**
    label: {
        text: 'A',
        color: '#79E149'
    }
});

但是： 1.使用此类图标时不会出现标签

实际上我不想使用外部图像，因为 URL 稍后可能会更改。事实上很多图标似乎已经消失了，例如： http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png

谢谢并致以最诚挚的问候

亚历克斯

Answer 1

试试这个

GoogleMap googlemap;

googlemap.addMarker(new MarkerOptions()
.position(new LatLng( 22.48, 114.20))
.title("My House").snippet("A").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)));

Answer 2

您的标签文本是绿色的 (#79E149)，因此它与标记融为一体
如果您想在标记上放置标签，您可能不希望标记上有 "dot"（将标记图标的名称从 "green-dot" 更改为 "green"）。
图标的 LabelOrigin 对于特定 marker/label 组合是错误的

proof of concept fiddle

代码片段：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(22.48, 114.20),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // Adding a marker to the map 
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(22.48, 114.20),
    map: map,
    title: 'My House',
    icon: {
      url: 'http://maps.google.com/mapfiles/ms/icons/green.png',
      labelOrigin: new google.maps.Point(15, 10)
    },
    label: {
      text: 'A',
      color: 'black'
    }
  });
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(22.49194, 114.204426),
    map: map,
    title: 'My Other House',
    icon: {
      url: 'http://maps.google.com/mapfiles/ms/icons/orange.png',
      labelOrigin: new google.maps.Point(15, 10)
    },
    label: {
      text: 'B',
      color: 'black'
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Google 地图：如何更改标记的默认红色并添加标签

Google Maps: How to change Marker default red color and add label

google-maps

markers

google-maps-markers