添加CSS風格的標記谷歌地圖

Question

有人可以請告訴我如何可以將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); 

Answer 1

使用RichMarker for Google Maps v3 - 用法：

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

JSFiddle example.

Answer 2

這裏有你所提到的脈衝動畫的修改版本，我使用的作品來的。基本上你創建一個覆蓋圖（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; 
} 
} 

Answer 3

curMarker =新RichMarker（{ 位置：pointToMoveTo， 圖：圖， 內容： ''， }）;

Answer 4

我在我的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>