【问题标题】:Is it possible to draw a circle on a Google static map?是否可以在谷歌静态地图上画一个圆圈?
【发布时间】:2011-04-15 13:37:09
【问题描述】:

静态地图 API 讨论了路径,但没有提及圆圈。这可能吗? 谢谢

【问题讨论】:

    标签: google-maps google-static-maps


    【解决方案1】:

    您可以做的是使用encoded polyline algorithm 产生足够的点来获得大致圆形的路径。肯定会涉及到编码:您需要获取圆的中心和半径,将其转换为一系列纬度/经度,然后使用算法进行编码。

    作为替代方案,您可以使用透明 gif 图像作为标记并将其放入地图中。

    【讨论】:

    • 请注意,标记有大小限制。 100 x 100 像素对我不起作用,但 75 x 75 像素可以。
    • 问题在于,根据圆的长度,您最终可能需要很多点,以便它看起来像一个圆,因此您可能缺少 URL 字符(有一个目前限制为 1024 个字符)
    • 2048 个字符,抱歉
    【解决方案2】:

    您可以通过绘制详细的PolyLine 来表示圆,因为 Google 静态地图本身不支持绘制圆。

    Here is a request example 包含 2 个圆,半径为 0.5 和 5 公里。请记住,您需要一种算法来生成正确的编码折线。我使用了这个implementation,因为我是用 PHP 编码的,但是你可以根据你想要的语言自己找到或开发类似的东西。

    这是我用来生成请求的 PHP 代码:

    <?php
    /* set some options */
    $mapLat = filter_input(INPUT_POST, 'lat1'); // latitude for map's and circle's center
    $mapLng = filter_input(INPUT_POST, 'lon1'); // longitude for map's and circle's center
    $mapRadius1 = 0.5; // the radius of the first circle (in Kilometres)
    $mapRadius2 = 5; // the radius of the second circle (in Kilometres)
    $mapFill_first = '330000'; // fill colour of the first circle
    $mapFill_second = 'FF99FF'; // fill colour of the second circle
    $map1Border1 = '91A93A'; // border colour of the first circle
    $map1Border2 = '0000CC'; // border colour of the second circle
    $mapWidth = 450; // map image width (max 640px)
    $mapHeight = 450; // map image height (max 640px)
    $zoom = 11;
    $scale = 2;
    /** create our encoded polyline string for the first circle*/
    $EncString1 = GMapCircle($mapLat, $mapLng, $mapRadius1);
    /** create our encoded polyline string for the second circle*/
    $EncString2 = GMapCircle($mapLat, $mapLng, $mapRadius2);
    /** put together the static map URL */
    $MapAPI = 'http://maps.google.com.au/maps/api/staticmap?';
    $MapURL = $MapAPI . 'center=' . $mapLat . ',' . $mapLng . '&zoom=' . $zoom . '&size=' .
        $mapWidth . 'x' . $mapHeight . '&scale=' . $scale . '&markers=color:red%7Clabel:S%7C'.$mapLat.','.$mapLng .
        '&maptype=roadmap&path=fillcolor:0x' . $mapFill_first .
        '33%7Ccolor:0x' . $map1Border1 . '00%7Cenc:' . $EncString1 . '&path=fillcolor:0x' .
        $mapFill_second . '33%7Ccolor:0x' . $map1Border2 . '00%7Cenc:' . $EncString2;
    
    /* output an image tag with our map as the source */
    //echo '<img src="' . $MapURL . '" />';
    echo json_encode($MapURL);
    
    function GMapCircle($Lat, $Lng, $Rad, $Detail = 8)
    {
        $R = 6371;
        $pi = pi();
        $Lat = ($Lat * $pi) / 180;
        $Lng = ($Lng * $pi) / 180;
        $d = $Rad / $R;
        $points = array();
        for ($i = 0; $i <= 360; $i += $Detail)
        {
            $brng = $i * $pi / 180;
            $pLat = asin(sin($Lat) * cos($d) + cos($Lat) * sin($d) * cos($brng));
            $pLng = (($Lng + atan2(sin($brng) * sin($d) * cos($Lat), cos($d) - sin($Lat) * sin($pLat))) * 180) / $pi;
            $pLat = ($pLat * 180) / $pi;
            $points[] = array($pLat, $pLng);
        }
    
        require_once('PolylineEncoder.php');
        $PolyEnc = new PolylineEncoder($points);
        $EncString = $PolyEnc->dpEncode();
    
        return $EncString['Points'];
    }
    

    感谢jomacinc的教程,欣赏:)

    【讨论】:

      【解决方案3】:

      您可以使用 computeOffset 方法很容易地逼近一个圆,该方法可让您获得沿圆周的坐标。

      在这个例子中,我使用了 8 度的增量,所以这将给出 45 对坐标。对于我使用的圆圈大小,圆圈在静态地图中看起来很圆。如果您使用大圆圈,则只需将增量更改为较小的值,例如 j = j + 6。

      变量pathText被添加到静态地图所需的Web地址的其余部分。

      var pathText = '&path=';
      var circumLatLng;
      
      for (var j = 0; j < 361; j = j + 8) {
      
      circumLatLng = google.maps.geometry.spherical.computeOffset(circle.getCenter(), circle.getRadius(), j);
      
      pathText += circumLatLng.lat().toFixed(6) + ',' + circumLatLng.lng().toFixed(6) + '|';
      }
      

      【讨论】:

        【解决方案4】:

        这是可能的,但你必须画一个有很多边的形状才能看起来像一个圆。

        这是我的例子:

        <img src="http://maps.google.com/maps/api/staticmap?size=600x500&path=fillcolor:0x0000FF|weight:3|color:0xFF0000|enc:ue{cI|rrH`@qs@hBis@nDyr@rF_r@tH_q@xJyo@zLgn@vNol@rPsj@lRmh@`Taf@tUqc@dWy`@nX{]vY{ZxZuWx[kTr\_Qh]oMz]}If^iFl^uBn^?n^tBd^hFz]|Ih]nMr\~Px[jTxZtWvYzZnXz]dWx`@tUpc@`T`f@lRlh@rPrj@xNnl@xLfn@xJxo@vH~p@rF~q@lDxr@hBhs@b@ps@c@ps@iBfs@mDxr@sF~q@wH`q@yJvo@yLfn@yNpl@sPpj@mRlh@aTbf@uUnc@eWx`@oX|]wYzZyZtWy[jTs\~Pi]lM{]|Ie^jFo^rBo^?m^sBg^kF{]}Ii]mMs\_Qy[kTyZuWwY{ZoX}]eWy`@uUoc@aTcf@mRmh@sPqj@wNql@{Lgn@yJwo@uHaq@sF_r@oDyr@iBgs@a@qs@&sensor=true" border="0"/>
        

        Or try this link to view it

        为了生成这个,我使用了freemaptools.com

        【讨论】:

        • 有什么办法让这个动态化?如果我有许多不同的坐标要使用?
        • @JonasB 这是可能的。寻找折线生成器。如果有任何用处,我已经为此目的制定了一个角度指令?
        • 值得注意的是,该站点使用 PHP 折线编码器(来自客户端源代码:xmlHttp.open("POST","ajax/csv-polyline-encoder.php",true);)。
        猜你喜欢
        • 2011-11-11
        • 2016-07-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-08-22
        • 1970-01-01
        • 2013-02-12
        • 2018-11-17
        相关资源
        最近更新 更多