Google Maps Api绘制一个圈子 [英] Google Maps Api Drawing a Circle

查看:101
本文介绍了Google Maps Api绘制一个圈子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好我有一个谷歌地图API的问题,我使用库绘图,不知道这是否正常,但是当我使用圆形绘图此刻开始画这个不出现在地图只在圆圈完成时出现,但其他控制器(如多边形或矩形)出现在开始绘制的瞬间,我没有复制谷歌地图API在其页面中具有的示例,并发生相同的情况。

Hi i've a problem with Google maps api, i'am using the library Drawing and don't know if this is normal but when i am using Circle Drawing at the moment to start to draw this don't appear in the map only appear when the circle is completed, but the other controller like polygon or rectangle it's appear in the momento to start to draw, i did copy the example that google maps api have in their page and happen the same..

某些解决方案..感谢您的帮助。

Some solution.. Thanks for the help.

这是来自Google maps API的代码

This is code from Google maps API

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {
      icon: 'images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>


推荐答案

它为我工作。

var rad=9;
var draw_circle=null;
draw_circle = new google.maps.Circle({
                                     center: new google.maps.LatLng(32.0833, 34.8000),
                                     radius: rad,
                                     strokeColor: "#FFFFFF",
                                     strokeOpacity: 0.8,
                                     strokeWeight: 2,
                                     fillColor: "#FFFFFF",
                                     fillOpacity: 0.35,
                                     map: map
                                     });

希望它有帮助。

这篇关于Google Maps Api绘制一个圈子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆