本文介绍了googleMap标记旋转位置的变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
I am using overlay as marker, and here is my below code which I created.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Label Overlay Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(40, -100)
, map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
})
, goldStar = {
path: 'M57.996 -29.483q0 1.836 -1.332 3.24l-2.7 2.7q-1.368 1.368 -3.276 1.368 -1.944 0 -3.24 -1.368l-10.584 -10.548v25.344q0 1.872 -1.35 3.042t-3.258 1.17h-4.608q-1.908 0 -3.258 -1.17t-1.35 -3.042v-25.344l-10.584 10.548q-1.296 1.368 -3.24 1.368t-3.24 -1.368l-2.7 -2.7q-1.368 -1.368 -1.368 -3.24 0 -1.908 1.368 -3.276l23.436 -23.436q1.26 -1.332 3.24 -1.332 1.944 0 3.276 1.332l23.436 23.436q1.332 1.404 1.332 3.276z',
fillColor: 'red',
fillOpacity: 5,
scale: 0.2,
strokeWeight: 0,
rotation: 190,
anchor: google.maps.Point(0, 0),
size: google.maps.Size(-8, -8)
};
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: goldStar
});
var label = new Label({
map: map
});
label.bindTo('position', marker, 'position');
label.bindTo('text', marker, 'position');
};
function Label(opt_options) {
this.setValues(opt_options);
var div = this.div_ = document.createElement('div');
div.style.cssText = 'width: 20px; height: 20px; border-radius: 100%; position: absolute;' +
'background-color: #8dc73f; ';
};
Label.prototype = new google.maps.OverlayView;
Label.prototype.onAdd = function() {
var pane = this.getPanes().overlayLayer;
pane.appendChild(this.div_);
};
Label.prototype.draw = function() {
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));
var div = this.div_;
div.style.left = position.x - 17 + 'px';
div.style.top = position.y - 6 +'px';
div.style.display = 'block';
};
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 100%; width: 100%"></div>
</body>
</html>
As the in above code I created a custom marker, Mean-while I added a rotation for the path, when ever the marker rotation is changed to other than 190, suppose 60, 45, 230, 270. the direction path icon is displaying in a different place.
Currently rotation: 190 will work fine.
How can I set the rotation of the marker to be set relative to the markerlabel?
Set your circle so it is centered on the position of where you want the marker. It is 20x20, so center it at 10,10:
function Label(opt_options) {
this.setValues(opt_options);
var div = this.div_ = document.createElement('div');
div.style.cssText = 'width: 20px; height: 20px; border-radius: 100%; position: absolute;' +
'background-color: #8dc73f; ';
};
//
Label.prototype.draw = function() {
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));
var div = this.div_;
div.style.left = position.x - 10 + 'px';
div.style.top = position.y - 10 + 'px';
div.style.display = 'block';
};
Then set the anchor appropriately (at its center as well so it can rotate and still be in the center of the circle).
goldStar = {
path: 'M57.996 -29.483q0 1.836 -1.332 3.24l-2.7 2.7q-1.368 1.368 -3.276 1.368 -1.944 0 -3.24 -1.368l-10.584 -10.548v25.344q0 1.872 -1.35 3.042t-3.258 1.17h-4.608q-1.908 0 -3.258 -1.17t-1.35 -3.042v-25.344l-10.584 10.548q-1.296 1.368 -3.24 1.368t-3.24 -1.368l-2.7 -2.7q-1.368 -1.368 -1.368 -3.24 0 -1.908 1.368 -3.276l23.436 -23.436q1.26 -1.332 3.24 -1.332 1.944 0 3.276 1.332l23.436 23.436q1.332 1.404 1.332 3.276z',
fillColor: 'red',
fillOpacity: 5,
scale: 0.2,
strokeWeight: 0,
rotation: 190,
anchor: new google.maps.Point(30,-30)
};
related questions:
code snippet:
function initialize() {
var latLng = new google.maps.LatLng(40, -100),
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}),
goldStar = {
path: 'M57.996 -29.483q0 1.836 -1.332 3.24l-2.7 2.7q-1.368 1.368 -3.276 1.368 -1.944 0 -3.24 -1.368l-10.584 -10.548v25.344q0 1.872 -1.35 3.042t-3.258 1.17h-4.608q-1.908 0 -3.258 -1.17t-1.35 -3.042v-25.344l-10.584 10.548q-1.296 1.368 -3.24 1.368t-3.24 -1.368l-2.7 -2.7q-1.368 -1.368 -1.368 -3.24 0 -1.908 1.368 -3.276l23.436 -23.436q1.26 -1.332 3.24 -1.332 1.944 0 3.276 1.332l23.436 23.436q1.332 1.404 1.332 3.276z',
fillColor: 'red',
fillOpacity: 5,
scale: 0.2,
strokeWeight: 0,
rotation: 190,
anchor: new google.maps.Point(30, -30)
};
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: goldStar,
});
var label = new Label({
map: map
});
label.bindTo('position', marker, 'position');
label.bindTo('text', marker, 'position');
var rotation = 190;
setInterval(function() {
rotation += 20;
goldStar.rotation = rotation;
marker.setIcon(goldStar);
}, 1000);
};
function Label(opt_options) {
this.setValues(opt_options);
var div = this.div_ = document.createElement('div');
div.style.cssText = 'width: 20px; height: 20px; border-radius: 100%; position: absolute;' +
'background-color: #8dc73f; ';
};
Label.prototype = new google.maps.OverlayView;
Label.prototype.onAdd = function() {
var pane = this.getPanes().overlayLayer;
pane.appendChild(this.div_);
};
Label.prototype.draw = function() {
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));
var div = this.div_;
div.style.left = position.x - 10 + 'px';
div.style.top = position.y - 10 + 'px';
div.style.display = 'block';
};
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>
这篇关于googleMap标记旋转位置的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！