Question

我在http://jsfiddle.net/doktormolle/jcHqt/上有一个教程，但是标记的渲染并不是那么好，尤其是我自己的自定义标记有点像素化。我想用css代替div来实现同样的事情，任何人都可以提供帮助。

body,html,#map_canvas{height:100%;margin:0;}
#map_canvas .centerMarker{
position:absolute;
/*url of the marker*/
background:url(http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-    PNG/128/Map-Marker-Marker-Outside-Azure.png) no-repeat;
/*center the marker*/
top:50%;left:50%;
z-index:1;
/*fix offset when needed*/
margin-left:-10px;
margin-top:-34px;
/*size of the image*/
height:34px;
width:20px;
cursor:pointer;

Answer 1

您的答案将在Google地图文档中

https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom - 这是SVG选项

https://developers.google.com/maps/documentation/javascript/markers#simple_icons - 这是Image png / jpeg

Add CSS styled marker to google maps - 这是一个CSS选项（最后回答）

Answer 2

要创建自定义标记，可以使用google.maps.OverlayView。

这是我的示例/库，用于使用div（或其他）创建自定义HTML＆CSS标记：

https://github.com/sergiopf/markerlocation

自定义css地图标记

2 个答案: