我正在使用谷歌地图作为地图并在地图中展示标记,因为我之前使用mapBOX,我们展示的地图标记如下所示。
但是使用谷歌地图作为标记,我使用google.maps.SymbolPath.CIRCLE作为圆形标记。
但是我的情况很少次我想在标记内部使用带有一些文字的SQUARED MARKERS。
我如何实现这一目标,是否有任何特殊的库我必须使用这种情况。
答案 0 :(得分:4)
您可以为google.maps.Symbols定义自定义路径。以下是基于example in the documentation的示例。您可以添加a single character "label" to the marker。
var square = {
path: 'M -2,-2 2,-2 2,2 -2,2 z', // 'M -2,0 0,-2 2,0 0,2 z',
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1,
scale: 5
};
var marker = new google.maps.Marker({
position: {lat: 21.5, lng: 153.027},
map: map,
icon: square,
label: {
text:"X",
fontWeight: "bold"
}
});
代码段
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {
lat: 21.5,
lng: 153.027
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the custom symbols. All symbols are defined via SVG path notation.
var square = {
path: 'M -2,-2 2,-2 2,2 -2,2 z', // 'M -2,0 0,-2 2,0 0,2 z',
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1,
scale: 5
};
var marker = new google.maps.Marker({
position: {
lat: 21.5,
lng: 153.027
},
map: map,
icon: square,
label: {
text: "X",
fontWeight: "bold"
}
});
var toggle = false;
google.maps.event.addListener(marker, 'click', function(evt) {
if (!toggle) {
this.setLabel({
text: "X",
color: "white",
fontWeight: "bold"
});
} else {
this.setLabel({
text: "X",
color: "black",
fontWeight: "bold"
});
}
toggle = !toggle;
});
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
&#13;