将 CSS 样式标记添加到谷歌地图

Posted 2023-02-23

【中文标题】将 CSS 样式标记添加到谷歌地图

【英文标题】：Add CSS styled marker to google maps

【发布时间】：2014-02-09 21:35:17

【问题描述】：

谁能告诉我如何将this animated marker 添加到下面的谷歌地图API。

以下是标准的谷歌地图 api 代码，带有为标记（图标）提供图像源的选项。

function initialize() 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = 
    zoom: 4,
    center: myLatlng
  
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker(
      position: myLatlng,
      map: map,
      icon: marker.png,         //Option for setting the marker source
      title: 'Hello World!'
  );


google.maps.event.addDomListener(window, 'load', initialize);

【问题讨论】：

我很确定您需要将图像添加到图标参数，但是该图钉完全是在 CSS 中绘制的。您可以向图像添加动画，但不确定是否可以完全绘制它。另一种选择是使用谷歌地图标记对象 [link] w3schools.com/googleAPI/google_maps_overlays.asp 或者这是一个好的开始 [link] sitepoint.com/embellishing-your-google-map-with-css3-and-jquery

不清楚您的问题是使标记 CSS 样式化，还是您希望它在添加到地图时具有动画效果。如果是后者，您可以在创建标记时在标记的选项中指定 animation: google.maps.Animation.DROP 属性。见developers.google.com/maps/documentation/javascript/examples/…

我遇到的问题是在谷歌地图上显示 css 样式的标记（带有脉冲动画）。

我刚刚发现有人已经在下面的链接中实现了 css 样式的标记（滚动到页面底部以查看它的工作原理）。 atmyprime.com 试图弄清楚这是如何实现的。

【参考方案1】：

curMarker = new RichMarker(
    position: pointToMoveTo,
    map: map,
    content: '<div class="pin2 bounce2"></div><div class="pulse2"></div>',
);

【参考方案2】：

我在 Angular2 Ionic3 项目中为此使用了 RichMarker。

let marker = new RichMarker(
  position: new google.maps.LatLng(markerData.lat, markerData.lng),
  map: this.map,
  content: '<div class="richmarker-wrapper"><center><img class="marker-image" src="' + image +'"></img><p class="marker-nickname">' + markerData.story.user.nickName + '</p></center></div>',
  shadow: 0
); 

诀窍是如何导入 js 文件。在 src 目录中，我将 js 文件添加到 index.html 中，如下所示：

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=MyApiKEY"></script>
<script async defer src="assets/js/richmarker.js"></script>

【参考方案3】：

使用RichMarker for Google Maps v3 - 用法：

curMarker = new RichMarker(
    position: new google.maps.LatLng(position),
    map: map,
    content: '<div id="foo">Bar</div>'
);

JSFiddle example.

【讨论】：

如何将它添加到我的 Angular 2 项目中？我在第 37 行遇到错误 RichMarker.prototype = new google.maps.OverlayView();窗口['RichMarker'] = RichMarker; richmarker.js:37 未捕获的参考错误：谷歌未在 richmarker.js:37 中定义

@Wasyster 也许您需要添加“richmarker.js”库。你在这里找到github.com/googlemaps/v3-utility-library/blob/master/richmarker/…

【参考方案4】：

这是你提到的脉冲动画器的修改版本，我正在使用它。基本上，您创建一个覆盖 (https://developers.google.com/maps/documentation/javascript/customoverlays)，然后通过附加到标记点来定位。

要使用 CSS 创建图钉和动画，我相信您需要将图钉图像设置为空白并设置为正确的大小，如果您希望它可以通过标记点击。

var image = 
  url: '/images/blank.png',
  size: new google.maps.Size(100, 39),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(50, 39),
  ;

然后确保在正确的窗格上绘制叠加层

var pane = this.getPanes().overlayImage; (contains the marker foreground images.)

我在下面提供的实现略有不同，因为我决定使用图钉图像而只使用动画部分。我将在 overlayShadow 上进行绘制，因此动画位于我用于标记的图像后面。

JS

var animatedOverlay;

// Define the animated overlay, derived from google.maps.OverlayView
function PinAnimation(opt_options) 
    this.setValues(opt_options);
    var div = this.div_ = document.createElement('div');
    div.id = 'holder';

    var span = this.span_ = document.createElement('span');
    span.className = 'pulse';
    div.appendChild(span);
;

PinAnimation.prototype = new google.maps.OverlayView;

PinAnimation.prototype.onAdd = function() 

     //Overlay shadow puts the animation behind the pin
     var pane = this.getPanes().overlayShadow;
     pane.appendChild(this.div_);

     // Ensures the PinAnimation is redrawn if the text or position is changed.
     var me = this;
     this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function()  me.draw(); ),
     ];
;

// Implement onRemove
PinAnimation.prototype.onRemove = function() 
     this.div_.parentNode.removeChild(this.div_);

     // PinAnimation is removed from the map, stop updating its position/any other listeners added.
     for (var i = 0, I = this.listeners_.length; i < I; ++i) 
          google.maps.event.removeListener(this.listeners_[i]);
     
;

// Set the visibility to 'hidden' or 'visible'.
PinAnimation.prototype.hide = function() 
    if (this.div_) 
        this.div_.style.visibility = 'hidden';
    
;
PinAnimation.prototype.show = function() 
    if (this.div_) 
        this.div_.style.visibility = 'visible';
    
;

// Implement draw
PinAnimation.prototype.draw = function() 
    var topPadding = 0;
    var sizeHeight = 50
    var sizeWidth = sizeHeight;
    var centerX = sizeWidth/2;
    var centerY = sizeHeight/2;

     var projection = this.getProjection();
     var position = projection.fromLatLngToDivPixel(this.get('position'));
     var div = this.div_;
//Adjust overlay position to be centered over the point
     div.style.left = position.x-centerX + 'px';
     div.style.top = position.y-topPadding-centerY + 'px';
     div.style.display = 'block';
;

//Set marker and draw overlay
function setMarker(location) 

    var maps_location = new google.maps.LatLng(location.latitude, location.longitude);

    var marker = new google.maps.Marker(
        position: map_location,
        map: map,
        icon: marker.png,
        title: 'Hello World!'
        );

    animatedOverlay = new PinAnimation(
        map: map
    );
    animatedOverlay.bindTo('position', marker, 'position');
    animatedOverlay.show();

CSS

#holder 
height: 50px;
width: 50px;
position: absolute;
transform: rotateX(55deg);
background: transparent;

.pulse 
    border: 10px solid #5bc0de;
    background: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    -webkit-animation: pulse 1s ease-out;
    -moz-animation: pulse 1s ease-out;
    animation: pulse 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: absolute;
    z-index: 1;
    opacity: 0;

@-moz-keyframes pulse 
 0% 
    -moz-transform: scale(0);
    opacity: 0.0;
 
 25% 
    -moz-transform: scale(0);
    opacity: 0.1;
 
 50% 
    -moz-transform: scale(0.1);
    opacity: 0.3;
 
 75% 
    -moz-transform: scale(0.5);
    opacity: 0.5;
 
 100% 
    -moz-transform: scale(1);
    opacity: 0.0;
 

@-webkit-keyframes pulse 
 0% 
    -webkit-transform: scale(0);
    opacity: 0.0;
 
 25% 
    -webkit-transform: scale(0);
    opacity: 0.1;
 
 50% 
    -webkit-transform: scale(0.1);
    opacity: 0.3;
 
 75% 
    -webkit-transform: scale(0.5);
    opacity: 0.5;
 
 100% 
    -webkit-transform: scale(1);
    opacity: 0.0;