googleMap标记旋转位置变化

我使用覆盖作为标记，这里是我创建的下面的代码。googleMap标记旋转位置变化

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

作为在上面的代码我创建的自定义标记，均值而我添加了一个旋转的路径，当过所述标记旋转被改变为其它比190，假设60，45，230，270。方向路径图标显示在不同的地方。

当前旋转：190会正常工作。

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

来源

2016-03-22 prudvi raju

设置您的圆圈，使其居中您想要标记的位置。它是20×20，所以在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) 
};

相关的问题：

proof of concept fiddle

代码片段：

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>

来源

2016-03-22 13:48:01 geocodezip

googleMap标记旋转位置变化

回答

相关问题