Google地图圈改变编辑处理图标 [英] Google Map Circle Change Edit Handle Icon

问题描述

我正在一个网站上工作，我必须根据设计渲染谷歌地图，我在地图上有一个圆圈并且它是可编辑的，我想将默认的圆形手柄更改为某个自定义图像图标。我如何能做到这一点，以供参考这个网站已经做了未使用可编辑圈子，它是使用MVC绑定，如这个例子所示，从文章

a href =http://jsfiddle.net/bmf5p500/2/ =nofollow noreferrer>示例小提琴 from this related question：

< a href =https://i.stack.imgur.com/Pu7ll.png =nofollow noreferrer>
$ b

代码段：

 函数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）; / ** *一个距离小部件，它将显示一个可以调整大小的圆，并以*为单位提供半径。 * * @param {google.maps.Map}地图附加距离小部件的地图。 * * @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！'}）; //将标记贴图属性绑定到DistanceWidget贴图属性marker.bindTo（'map'，this）; //将标记位置属性绑定到DistanceWidget位置// property marker.bindTo（'position'，this）; //创建一个新的半径小部件var radiusWidget = new RadiusWidget（）; //将radiusWidget地图绑定到DistanceWidget地图radiusWidget.bindTo（'map'，this）; //将radiusWidget中心绑定到DistanceWidget位置radiusWidget.bindTo（'center'，this，'position'）; //绑定到radiusWidgets的distance属性this.bindTo（'distance'，radiusWidget）; //绑定到radiusWidgets的边界属性this.bindTo（'bounds'，radiusWidget）; } DistanceWidget.prototype = new google.maps.MVCObject（）; / ** *一个半径小部件，它向地图添加一个圆，并以标记为中心。 * * @constructor * / function RadiusWidget（）{var circle = new google.maps.Circle（{strokeWeight：2}）; //设置距离属性值，默认为50km。 this.set（'distance'，50）; //将RadiusWidget bounds属性绑定到circle bounds属性。 this.bindTo（'bounds'，circle）; //将圆心绑定到RadiusWidget中心属性circle.bindTo（'center'，this）; //将圆地图绑定到RadiusWidget地图circle.bindTo（'map'，this）; //将圆半径属性绑定到RadiusWidget的半径属性circle.bindTo（'radius'，this）; this.addSizer_（）; } RadiusWidget.prototype = new google.maps.MVCObject（）; / ** *当距离发生变化时更新半径。 * / RadiusWidget.prototype.distance_changed = function（）{this.set（'radius'，this.get（'distance'）* 1000）; }; / ** *将sizer标记添加到地图。 * * @private * / RadiusWidget.prototype.addSizer_ = function（）{var sizer = new google.maps.Marker（{draggable：true，icon：{url：https://maps.gstatic.com/intl/zh-cn /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（）{//设置圆距（半径）me.setDistance（）;}）; }; / ** *更新圆的​​中心，并将sizer放回原位。 * *位置与DistanceWidget绑定，因此当*距离小部件的位置发生更改时，预计会更改此位置。 * / RadiusWidget.prototype.center_changed = function（）{var bounds = this.get（'bounds'）; //边界可能并不总是如此，因此请检查它是否存在。 if（bounds）{var lng = bounds.getNorthEast（）。lng（）; //将sizer放置在圆心的正中。 var position = new google.maps.LatLng（this.get（'center'）。lat（），lng）; this.set（'sizer_position'，position）; }}; / ** *以km为单位计算两个latlng位置之间的距离。 * @see http://www.movable-type.co.uk/scripts/latlong.html * * @param {google.maps.LatLng} p1第一个经典点。 * @param {google.maps.LatLng} p2第二个经济点。 * @return {number}以km为单位的两点之间的距离。 * @private * / RadiusWidget.prototype.distanceBetweenPoints_ = function（p1，p2）{if（！p1 ||！p2）{return 0; } var R = 6371; //以公里为单位的地球半径var dLat =（p2.lat（） -  p1.lat（））* Math.PI / 180; var dLon =（p2.lng（） -  p1.lng（））* Math.PI / 180; 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;返回d; }; / ** *根据分割器的位置设置圆的距离。 * / RadiusWidget.prototype.setDistance = function（）{//当sizer被拖动时，其位置发生变化。因为// RadiusWidget的sizer_position绑定到sizer的位置，它也会改变。 var pos = this.get（'sizer_position'）; var center = this.get（'center'）; var distance = this.distanceBetweenPoints_（center，pos）; //设置绑定到它的任何对象的distance属性this.set（'distance'，distance）; };函数displayInfo（widget）{var info = document.getElementById（'info'）; to.Value（3）+'，distance：'+ widget.get（'distance'）。toFixed（3）; }    html，body，＃map-canvas {height： 100％; margin：0px; < script src =https：//   

I am working on a website where I have to render a google map according to the design, I have a circle in map and its editable, I want to change the default rounded handles to some custom image icon. How can I do that, for reference this website has already done that.

解决方案

The website you reference is not using an editable circle, it is using MVC binding as shown in this example from this "article" in the documentation

example fiddle from this related question: How to style editable circle controls in Google Maps

code snippet:

      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>

这篇关于Google地图圈改变编辑处理图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！