googleMap标记旋转位置发生变化

googleMap marker rotation position changes

本文关键字：变化 位置 旋转 googleMap      更新时间：2023-09-26

我使用overlay作为标记，下面是我创建的代码。

<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>

在上面的代码中，我创建了一个自定义标记Mean，同时我为路径添加了一个旋转，当标记旋转被更改为190以外时，假设为60、45、230、270。方向路径图标显示在不同的位置。

目前轮换：190人可以。

如何设置标记相对于标记标签的旋转？

设置你的圆圈，使其位于你想要标记的位置的中心。它是20x20，所以中心在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';
};

然后适当地设置锚点（也在锚点的中心，这样它就可以旋转并且仍然在圆心）。

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)
};

相关问题：

  • 更改谷歌地图中的标记图标选项
  • 将谷歌地图SymbolPath集中在LatLon上

概念验证小提琴

代码片段：

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>

相关文章：