【问题标题】:Draw a circle path in google map static api在谷歌地图静态api中绘制圆形路径
【发布时间】:2019-07-07 17:01:28
【问题描述】:

我正在使用android中的地图静态api开发一个应用程序

这是业务逻辑,用这个位置从google静态api获取用户位置请求并围绕这个位置画一个圆圈

这是我正在使用的代码

https://maps.googleapis.com/maps/api/staticmap?center=29.31166,47.481766&zoom=7&size=600x300&maptype=roadmap&key=My Key

现在的问题是如何在它周围画一个圆圈,我搜索了它,发现它是使用路径完成的,但不明白如何获得该路径

【问题讨论】:

    标签: android google-maps android-maps-v2 google-static-maps


    【解决方案1】:

    你只需要像Developers Guide一样绘制路径:

    http://maps.googleapis.com/maps/api/staticmap?center=29.31166,47.48177&zoom=7&size=600x300&path=color:0x0000FFFF|weight:3|fillcolor:0x0000FF77|<FIRST_POINT_LAT>,<FIRST_POINT_LNG>|<SECOND_POINT_LAT>,<SECOND_POINT_LNG>|...|<LAST_POINT_LAT>,<LAST_POINT_LNG>&key=<YOUR_API_KEY>

    <FIRST_POINT_LAT>,<FIRST_POINT_LNG>|<SECOND_POINT_LAT>,<SECOND_POINT_LNG>|...|<LAST_POINT_LAT>,<LAST_POINT_LNG> 是你的圆路径的坐标。对于它的计算,你可以使用这样的方法:

    private List<LatLng> getCirclePoints(LatLng center, double radius) {
        List<LatLng> circlePoints = new ArrayList<>();
    
        // convert center coordinates to radians
        double lat_rad = Math.toRadians(center.latitude);
        double lon_rad = Math.toRadians(center.longitude);
        double dist = radius / 6378137;
    
        // calculate circle path point for each 5 degrees
        for (int deg = 0; deg < 360; deg += 5) {
            double rad = Math.toRadians(deg);
    
            // calculate coordinates of next circle path point
            double new_lat = Math.asin(Math.sin(lat_rad) * Math.cos(dist) + Math.cos(lat_rad) * Math.sin(dist) * Math.cos(rad));
            double new_lon = lon_rad + Math.atan2(Math.sin(rad) * Math.sin(dist) * Math.cos(lat_rad), Math.cos(dist)
                    - Math.sin(lat_rad) * Math.sin(new_lat));
    
            // convert new lat and lon to degrees
            double new_lat_deg = Math.toDegrees(new_lat);
            double new_lon_deg = Math.toDegrees(new_lon);
    
            circlePoints.add(new LatLng(new_lat_deg, new_lon_deg));
        }
    
        return circlePoints;
    }
    

    您可以用这种方式格式化静态地图 API URL:

    private String buildStaticApiUrlWithCircle(LatLng mapCenter, int zoom, int width, int height,
                                               LatLng circleCenter, double circleRadius, int pathWeight, String pathColor, String fillColor) {
    
        List<LatLng> circlePoints =getCirclePoints(circleCenter, circleRadius);
    
        StringBuilder url = new StringBuilder();
        url.append("http://maps.googleapis.com/maps/api/staticmap?");
        url.append(String.format("center=%8.5f,%8.5f", mapCenter.latitude, mapCenter.longitude));
        url.append(String.format("&zoom=%d", zoom));
        url.append(String.format("&size=%dx%d", width, height));
    
        // set circle path properties
        url.append(String.format("&path="));
        url.append(String.format("color:%s", pathColor));
        url.append(String.format("|weight:%d", pathWeight));
        url.append(String.format("|fillcolor:%s", fillColor));
    
        // add circle path points
        for (LatLng point : circlePoints) {
            url.append(String.format("|%8.5f,%8.5f", point.latitude, point.longitude));
        }
    
        // add API key to URL
        url.append(String.format("&key=%s", <YOUR_API_KEY>)));
        return url.toString();
    }
    

    圆形路径和填充颜色应设置为String"0xRRGGBBAA"格式,其中RR - 红色通道的值,GG - 绿色通道的值,BB - 蓝色通道的值和@ 987654334@ - alpha 通道的值(例如"0x0000FFFF" - 纯蓝色不透明,"0xFF000077" - 纯红色 50% 透明等等)。

    当你这样使用buildStaticApiUrlWithCircle()时:

    ...
    int mapZoom = 7;
    int mapWidth = 600;
    int mapHeight = 300;
    LatLng mapCenter = new LatLng(29.31166, 47.481766);
    
    LatLng circleCenter = new LatLng(29.376297, 47.976379);
    double circleRadiusMerers = 35000;
    String circlePathColor = "0x0000FFFF";
    String circleFillColor = "0x0000FF99";
    
    String mapUrl = buildStaticApiUrlWithCircle(mapCenter, mapZoom, mapWidth, mapHeight,
                                                circleCenter, circleRadiusMerers, 3, circlePathColor, circleFillColor);
    
    try {
        Bitmap mapBitmap = new GetStaticMapAsyncTask().execute(mapUrl).get();
        mMapImageView.setImageBitmap(mapBitmap);
    } catch (InterruptedException e) {
        e.printStackTrace();
    } catch (ExecutionException e) {
        e.printStackTrace();
    }
    ...
    

    GetStaticMapAsyncTask 在哪里:

    private class GetStaticMapAsyncTask extends AsyncTask<String, Void, Bitmap> {
    
        protected void onPreExecute() {
            super.onPreExecute();
        }
    
        protected Bitmap doInBackground(String... params) {
    
            Bitmap bitmap = null;
            HttpURLConnection connection = null;
    
            try {
                URL url = new URL(params[0]);
                connection = (HttpURLConnection) url.openConnection();
                connection.setRequestMethod("GET");
                connection.connect();
    
                int responseCode = connection.getResponseCode();
    
                InputStream stream = connection.getInputStream();
                bitmap = BitmapFactory.decodeStream(stream);
            } catch (MalformedURLException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                if (connection != null) {
                    connection.disconnect();
                }
            }
    
            return bitmap;
        }
    
        @Override
        protected void onPostExecute(Bitmap result) {
            super.onPostExecute(result);
    
        }
    }
    

    你会得到类似的东西:

    另外,您可以使用Google Maps Lite Mode 代替静态地图 API(Lite 模式支持绘制圆圈)。甚至,如果您需要在地图的中心精确绘制圆圈 - 直接在位图画布上绘制。例如,您可以这样修改GetStaticMapAsyncTaskdoInBackground()

    protected Bitmap doInBackground(String... params) {
    
        Bitmap bitmap = null;
        HttpURLConnection connection = null;
    
        try {
            URL url = new URL(params[0]);
            connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
    
            int responseCode = connection.getResponseCode();
            InputStream stream = connection.getInputStream();
            Bitmap mapBitmap = BitmapFactory.decodeStream(stream);
    
            Paint locaionMarkerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            locaionMarkerPaint.setColor(Color.BLUE);
    
            bitmap = Bitmap.createBitmap(mapBitmap.getWidth(), mapBitmap.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            canvas.drawBitmap(mapBitmap,0,0, null);
            canvas.drawCircle(mapBitmap.getWidth()/ 2, mapBitmap.getHeight() / 2, 20, locaionMarkerPaint);
    
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (connection != null) {
                connection.disconnect();
            }
        }
    
        return bitmap;
    }
    

    【讨论】:

    • 这似乎是一个很好的解决方案,我没有尝试过,我使用了静态图像并将其作为我的地图的掩码,但是您的解决方案鼓励我尝试,会尝试并获得回到你身边
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-21
    • 1970-01-01
    • 1970-01-01
    • 2011-03-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多