Comment modifier les contrôles de cercle modifiables dans Google Maps

Je crains que vous ne le pouvez pas. L'API ne fournit aucun contrôle sur ces poignées, et comme les cercles vivent à l'intérieur d'un canevas, il n'y a pas de moyen facile d'identifier l'élément pour le façonner.

Modifier:

Vous pouvez déclarer votre cercle comme non modifiable et autoriser les modifications uniquement en cas de survol de la souris.

var circle=new google.maps.Circle({ center: map.getCenter(), map: map, editable: false }); google.maps.event.addListener(circle, 'mouseover', function () { circle.set('editable',true); }); google.maps.event.addListener(circle, 'mouseout', function () { circle.set('editable',false); }); 

Une option serait de faire quelque chose comme cet exemple à partir du «article» : Fun with MVC dans la documentation Google Maps Javascript API v3 / Les poignées il n'y a que des marqueurs, la distance du centre est liée aux raduis, le marqueur central est Lié au centre du cercle.

Exemple de violon

 function init() { var mapDiv = document.getElementById('map-canvas'); var map = new google.maps.Map(mapDiv, { center: new google.maps.LatLng(37.790234970864, -122.39031314844), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }); var distanceWidget = new DistanceWidget(map); google.maps.event.addListener(distanceWidget, 'distance_changed', function() { displayInfo(distanceWidget); }); google.maps.event.addListener(distanceWidget, 'position_changed', function() { displayInfo(distanceWidget); }); } google.maps.event.addDomListener(window, 'load', init); 

Code de DistanceWidget modifié (modifié les icônes de marqueur):

  /** * A distance widget that will display a circle that can be resized and will * provide the radius in km. * * @param {google.maps.Map} map The map on which to attach the distance widget. * * @constructor */ function DistanceWidget(map) { this.set('map', map); this.set('position', map.getCenter()); var marker = new google.maps.Marker({ draggable: true, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) }, title: 'Move me!' }); // Bind the marker map property to the DistanceWidget map property marker.bindTo('map', this); // Bind the marker position property to the DistanceWidget position // property marker.bindTo('position', this); // Create a new radius widget var radiusWidget = new RadiusWidget(); // Bind the radiusWidget map to the DistanceWidget map radiusWidget.bindTo('map', this); // Bind the radiusWidget center to the DistanceWidget position radiusWidget.bindTo('center', this, 'position'); // Bind to the radiusWidgets' distance property this.bindTo('distance', radiusWidget); // Bind to the radiusWidgets' bounds property this.bindTo('bounds', radiusWidget); } DistanceWidget.prototype = new google.maps.MVCObject(); /** * A radius widget that add a circle to a map and centers on a marker. * * @constructor */ function RadiusWidget() { var circle = new google.maps.Circle({ strokeWeight: 2 }); // Set the distance property value, default to 50km. this.set('distance', 50); // Bind the RadiusWidget bounds property to the circle bounds property. this.bindTo('bounds', circle); // Bind the circle center to the RadiusWidget center property circle.bindTo('center', this); // Bind the circle map to the RadiusWidget map circle.bindTo('map', this); // Bind the circle radius property to the RadiusWidget radius property circle.bindTo('radius', this); this.addSizer_(); } RadiusWidget.prototype = new google.maps.MVCObject(); /** * Update the radius when the distance has changed. */ RadiusWidget.prototype.distance_changed = function () { this.set('radius', this.get('distance') * 1000); }; /** * Add the sizer marker to the map. * * @private */ RadiusWidget.prototype.addSizer_ = function () { var sizer = new google.maps.Marker({ draggable: true, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) }, title: 'Drag me!' }); sizer.bindTo('map', this); sizer.bindTo('position', this, 'sizer_position'); var me = this; google.maps.event.addListener(sizer, 'drag', function () { // Set the circle distance (radius) me.setDistance(); }); }; /** * Update the center of the circle and position the sizer back on the line. * * Position is bound to the DistanceWidget so this is expected to change when * the position of the distance widget is changed. */ RadiusWidget.prototype.center_changed = function () { var bounds = this.get('bounds'); // Bounds might not always be set so check that it exists first. if (bounds) { var lng = bounds.getNorthEast().lng(); // Put the sizer at center, right on the circle. var position = new google.maps.LatLng(this.get('center').lat(), lng); this.set('sizer_position', position); } }; /** * Calculates the distance between two latlng locations in km. * @see http://www.movable-type.co.uk/scripts/latlong.html * * @param {google.maps.LatLng} p1 The first lat lng point. * @param {google.maps.LatLng} p2 The second lat lng point. * @return {number} The distance between the two points in km. * @private */ RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) { if (!p1 || !p2) { return 0; } var R = 6371; // Radius of the Earth in km var dLat = (p2.lat() - p1.lat()) * Math.PI / 180; var dLon = (p2.lng() - p1.lng()) * Math.PI / 180; var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; }; /** * Set the distance of the circle based on the position of the sizer. */ RadiusWidget.prototype.setDistance = function () { // As the sizer is being dragged, its position changes. Because the // RadiusWidget's sizer_position is bound to the sizer's position, it will // change as well. var pos = this.get('sizer_position'); var center = this.get('center'); var distance = this.distanceBetweenPoints_(center, pos); // Set the distance property for any objects that are bound to it this.set('distance', distance); }; function displayInfo(widget) { var info = document.getElementById('info'); info.innerHTML = 'Position: ' + widget.get('position').toUrlValue(3) + ', distance: ' + widget.get('distance').toFixed(3); } 

extrait de code:

 function init() { var mapDiv = document.getElementById('map-canvas'); var map = new google.maps.Map(mapDiv, { center: new google.maps.LatLng(37.790234970864, -122.39031314844), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }); var distanceWidget = new DistanceWidget(map); google.maps.event.addListener(distanceWidget, 'distance_changed', function() { displayInfo(distanceWidget); }); google.maps.event.addListener(distanceWidget, 'position_changed', function() { displayInfo(distanceWidget); }); } google.maps.event.addDomListener(window, 'load', init); /** * A distance widget that will display a circle that can be resized and will * provide the radius in km. * * @param {google.maps.Map} map The map on which to attach the distance widget. * * @constructor */ function DistanceWidget(map) { this.set('map', map); this.set('position', map.getCenter()); var marker = new google.maps.Marker({ draggable: true, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) }, title: 'Move me!' }); // Bind the marker map property to the DistanceWidget map property marker.bindTo('map', this); // Bind the marker position property to the DistanceWidget position // property marker.bindTo('position', this); // Create a new radius widget var radiusWidget = new RadiusWidget(); // Bind the radiusWidget map to the DistanceWidget map radiusWidget.bindTo('map', this); // Bind the radiusWidget center to the DistanceWidget position radiusWidget.bindTo('center', this, 'position'); // Bind to the radiusWidgets' distance property this.bindTo('distance', radiusWidget); // Bind to the radiusWidgets' bounds property this.bindTo('bounds', radiusWidget); } DistanceWidget.prototype = new google.maps.MVCObject(); /** * A radius widget that add a circle to a map and centers on a marker. * * @constructor */ function RadiusWidget() { var circle = new google.maps.Circle({ strokeWeight: 2 }); // Set the distance property value, default to 50km. this.set('distance', 50); // Bind the RadiusWidget bounds property to the circle bounds property. this.bindTo('bounds', circle); // Bind the circle center to the RadiusWidget center property circle.bindTo('center', this); // Bind the circle map to the RadiusWidget map circle.bindTo('map', this); // Bind the circle radius property to the RadiusWidget radius property circle.bindTo('radius', this); this.addSizer_(); } RadiusWidget.prototype = new google.maps.MVCObject(); /** * Update the radius when the distance has changed. */ RadiusWidget.prototype.distance_changed = function() { this.set('radius', this.get('distance') * 1000); }; /** * Add the sizer marker to the map. * * @private */ RadiusWidget.prototype.addSizer_ = function() { var sizer = new google.maps.Marker({ draggable: true, icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png", size: new google.maps.Size(7, 7), anchor: new google.maps.Point(4, 4) }, title: 'Drag me!' }); sizer.bindTo('map', this); sizer.bindTo('position', this, 'sizer_position'); var me = this; google.maps.event.addListener(sizer, 'drag', function() { // Set the circle distance (radius) me.setDistance(); }); }; /** * Update the center of the circle and position the sizer back on the line. * * Position is bound to the DistanceWidget so this is expected to change when * the position of the distance widget is changed. */ RadiusWidget.prototype.center_changed = function() { var bounds = this.get('bounds'); // Bounds might not always be set so check that it exists first. if (bounds) { var lng = bounds.getNorthEast().lng(); // Put the sizer at center, right on the circle. var position = new google.maps.LatLng(this.get('center').lat(), lng); this.set('sizer_position', position); } }; /** * Calculates the distance between two latlng locations in km. * @see http://www.movable-type.co.uk/scripts/latlong.html * * @param {google.maps.LatLng} p1 The first lat lng point. * @param {google.maps.LatLng} p2 The second lat lng point. * @return {number} The distance between the two points in km. * @private */ RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) { if (!p1 || !p2) { return 0; } var R = 6371; // Radius of the Earth in km var dLat = (p2.lat() - p1.lat()) * Math.PI / 180; var dLon = (p2.lng() - p1.lng()) * Math.PI / 180; var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; }; /** * Set the distance of the circle based on the position of the sizer. */ RadiusWidget.prototype.setDistance = function() { // As the sizer is being dragged, its position changes. Because the // RadiusWidget's sizer_position is bound to the sizer's position, it will // change as well. var pos = this.get('sizer_position'); var center = this.get('center'); var distance = this.distanceBetweenPoints_(center, pos); // Set the distance property for any objects that are bound to it this.set('distance', distance); }; function displayInfo(widget) { var info = document.getElementById('info'); info.innerHTML = 'Position: ' + widget.get('position').toUrlValue(3) + ', distance: ' + widget.get('distance').toFixed(3); } 

 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script> <div id="info"></div> <div id="map-canvas"></div> 

Une façon simple d'ajouter du style au pointeur d'édition est la suivante.

 #map div[style^="position: absolute; left: 0px; top: 0px; width: 9px; height: 9px;"] { border-color: #777575 !important; border-width: 2px !important; }