googleMap işareti döndürme konumu değişiklikleri

Tabaka olarak işaretçi kullanıyorum ve aşağıda oluşturduğum kodum var. Şöyle googleMap işareti döndürme konumu değişiklikleri

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

Özel bir işaretleyici oluşturulan yukarıdaki kodu, Ortalama süre işaretleyici çevirme, 190 dışında değiştirildi 60, 45, 230, 270 varsayalım hiç bir yol, bir rotasyon ilave edildi. Yön yolu simgesi farklı bir yerde görüntülenir.

Şu anda döndürme: 190 iyi çalışacaktır.

İşaretçi işaretinin, işaretçi işaretine göre ayarlanmasını nasıl ayarlayabilirim?

kaynak

2016-03-22 prudvi raju

Dairenizi, işaretçiyi istediğiniz yere getirecek şekilde ayarlayın. Bu 20x20, yani 10,10 adresinden merkezi: (bu döndürme ve yine dairenin merkezine olabilir, böylece hem kendi merkezinde)

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

sonra uygun bir çapa ayarlayın.

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

ilgili sorular:

proof of concept fiddle

kod parçacığı:

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>

kaynak

2016-03-22 13:48:01 geocodezip

googleMap işareti döndürme konumu değişiklikleri

cevap

İlgili konular