googleMap标记旋转位置的变化 [英] googleMap marker rotation position changes
本文介绍了googleMap标记旋转位置的变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< html>< p>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title>标签覆盖范例< / title>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
功能初始化（）{
变种的latLng =新google.maps.LatLng（40，-100）
，地图=新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.3681-10.584 -10.548v25.344q0 1.872 -1.35 3.042 t-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，
标度：0.2，
strokeWeight，用于：0，
旋转：190，
锚：google.maps.Point（0，0），
size：google.maps.Size（-8，-8）
};
变种标记=新google.maps.Marker（{
位置：的latLng，
图：图，
图标：GOLDSTAR
}）;
var label = new Label（{
map：map
}）;
label.bindTo（'position'，marker，'position'）;
label.bindTo（'text'，marker，'position'）;
};
函数Label（opt_options）{
this.setValues（opt_options）;
var div = this.div_ = document.createElement（'div'）;
div.style.cssText ='width：20px; height：20px;边界半径：100％;位置：绝对;'+
'背景颜色：＃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_canvasstyle =height：100％; width：100％>< / div>
< / body>
< / html>
在上面的代码中，我创建了一个自定义标记Mean，而我为路径添加了一个旋转，当标记旋转改变为190以外时，假设60,45,230,270。方向路径图标显示在不同的地方。
当前的旋转：190将正常工作。
如何设置相对于markerlabel设置的标记旋转？
解决方案
设置您的圈子，使其居中您想要标记的位置。它是20×20，所以在10,10居中：
功能标签（opt_options）{
this.setValues（ opt_options）;
var div = this.div_ = document.createElement（'div'）;
div.style.cssText ='width：20px; height：20px;边界半径：100％;位置：绝对;'+
'背景颜色：＃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';
};
然后适当地设置锚点（在它的中心，因此它可以旋转并仍然位于中心
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.3681-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，
比例：0.2，
strokeWeight： 0，
rotation：190，
anchor：new google.maps.Point（30，-30）
};
相关问题：
li>
程式码片段：
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}），g oldStar = {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.3681-10.584 -10.548v25.344q0 1.872 -1.35 3.042t-3.258 1.17 h-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）;};函数Label（opt_options）{this.setValues（opt_options）; var div = this.div_ = document.createElement（'div'）; div.style.cssText ='width：20px; height：20px;边界半径：100％;位置：绝对;'+'背景颜色：＃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％;宽度：100％; margin：0px; < script src =https：//
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标记旋转位置的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
