googleMap Marker Rotationsposition ändert

Ich benutze Overlay als Marker, und hier ist mein unter Code, den ich erstellt habe.googleMap Marker Rotationsposition ändert

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

Da die in I obigen Code einen benutzerdefinierten Marker erstellt, mittler-während ich eine Rotation für den Pfad hinzugefügt, wann immer die Marker Rotation auf andere als 190 an, dass 60, 45, 230, 270 geändert wird. Das Richtungssymbol wird an einer anderen Stelle angezeigt.

Derzeit Rotation: 190 wird gut funktionieren.

Wie kann ich die Rotation des Markers relativ zum Markerlabel einstellen?

Quelle

2016-03-22 prudvi raju

Legen Sie Ihren Kreis so fest, dass er auf die Position der Markierung zentriert ist. Es 20x20 ist, zentriert, so dass es bei 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'; 
};

dann entsprechend den Anker gesetzt (in der Mitte und so drehbar und immer noch in der Mitte des Kreises).

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

ähnliche Fragen:

proof of concept fiddle

Code-Schnipsel:

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>

Quelle

2016-03-22 13:48:01 geocodezip

googleMap Marker Rotationsposition ändert

Antwort

Verwandte Themen