zoukankan      html  css  js  c++  java
  • 实现类似街旁网的分享足迹功能

    在sina微博上看到街旁网的客户端有一个分享足迹的功能,它可以显示我当前的位置,将微博头像标识在地图上作为我的当前位置,我觉得这个功能很酷,我也想在自己的app上加上这个功能。 
        
        由此开始了如下的研究:) 
        首先将头像标识在地图上很简单,问题的关键是作为android客户端我们需要将图片上传到sina微博,那就需要对当前地图进行截屏,将图片保存在sd卡上。这个是个难题,在我研究的时候android2.3.3版本还没出现,这个版本据说开放了截图功能,可以使用SurfaceFlinger API 截取到屏幕画面。 

        我尝试了很多办法都解决不了,最后想到了使用webview 

        布局如下: 

    Java代码

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation
    ="vertical" android:layout_width="fill_parent"
    android:layout_height
    ="fill_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation
    ="vertical" android:layout_width="fill_parent"
    android:layout_height
    ="380px">
    <WebView android:id="@+id/webview" android:layout_width="wrap_content"
    android:layout_height
    ="wrap_content" />
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation
    ="horizontal" android:layout_width="fill_parent"
    android:layout_height
    ="380px">
    <Button android:layout_width="100px" android:layout_marginLeft="30px"
    android:layout_height
    ="wrap_content" android:text="确定" android:id="@+id/Btn" />

    <Button android:layout_width="100px" android:layout_marginLeft="60px"
    android:layout_height
    ="wrap_content" android:text="取消" android:id="@+id/cancleBtn" />
    </LinearLayout>
    </LinearLayout>

      我们使用了webview就需要使用网页形式的地图,这个也可以有很多种选择,比如google的api,在这里我尝试使用mapabc的api,因为我看到街旁也是用这个:) 
    Java代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://app.mapabc.com/apis?&t=ajaxmap&v=2.1.2&key=xxxxxxxxxxx"></script>
    <script type="text/javascript">
    var mapObj=null;
    function mapInit(x,y,imageUrl) {
    var mapOptions = new MMapOptions();//构建地图辅助类
    mapOptions.zoom=17;//要加载的地图的缩放级别
    mapOptions.center=new MLngLat(x,y);//要加载的地图的中心点经纬度坐标
    mapOptions.toolbarPos = new MPoint(15,15); //设置工具条在地图上的显示位置
    mapOptions.overviewMap = HIDE; //设置鹰眼地图的状态,SHOW:显示,HIDE:隐藏(默认)
    mapOptions.scale = HIDE; //设置地图初始化比例尺状态,SHOW:显示(默认),HIDE:隐藏。
    mapOptions.returnCoordType = COORD_TYPE_OFFSET;//返回数字坐标
    mapOptions.zoomBox = true;//鼠标滚轮缩放和双击放大时是否有红框动画效果。
    mapObj=new MMap("map",mapOptions); //地图初始化
    addMarkerOnMap(x,y,imageUrl);
    }
    function addMarkerOnMap(x,y,imageUrl){
    var markerOption=new MMarkerOptions();
    markerOption.imageUrl
    =imageUrl;
    markerOption.picAgent
    =false;
    var Marker = new MMarker(new MLngLat(x,y),markerOption);
    Marker.id
    ="mark";
    mapObj.addOverlay(Marker,
    true);
    }
    </script>
    </head>
    <body>
    <div id="map" style="360px; height:450px"></div>
    </body>
    </html>

    其中这里的key需要自己申请。 


         需要将这个html文件放在assets文件夹中,取名为map.html 

         最后,我们需要一个activiy: 

    Java代码
    import java.io.FileOutputStream;

    import android.app.Activity;
    import android.app.ProgressDialog;
    import android.graphics.Bitmap;
    import android.graphics.Canvas;
    import android.graphics.Picture;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.view.View;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
    import android.widget.Button;
    import android.widget.Toast;

    public class Main extends Activity {

    private ProgressDialog progressBar;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    Button btn = (Button) findViewById(R.id.Btn);

    final WebView wv = (WebView) findViewById(R.id.webview);

    progressBar = ProgressDialog.show(Main.this, "请稍候", "网页加载中...");

    final String x = "116.397428";
    final String y = "39.90923";
    final String imageUrl = "http://tp4.sinaimg.cn/1916957395/50/1297582748/1";

    // 覆盖默认后退按钮的作用,替换成WebView里的查看历史页面
    wv.setOnKeyListener(new View.OnKeyListener() {
    public boolean onKey(View v, int keyCode, KeyEvent event) {
    if (event.getAction() == KeyEvent.ACTION_DOWN) {
    if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
    wv.goBack();
    return true;
    }
    }
    return false;
    }
    });

    wv.getSettings().setJavaScriptEnabled(true);
    wv.setWebViewClient(new WebViewClient() {
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return true;
    }

    public void onPageFinished(WebView view, String url) {
    if (progressBar.isShowing()) {
    progressBar.dismiss();
    }
    wv.loadUrl("javascript:mapInit('" + x + "','" + y + "','"
    + imageUrl + "')");
    }
    });

    wv.loadUrl("file:///android_asset/map.html");

    btn.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
    Picture pic = wv.capturePicture();
    int width = pic.getWidth();
    int height = pic.getHeight();
    if (width > 0 && height > 0) {
    Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmp);
    pic.draw(canvas);
    try {
    String fileName = "/sdcard/" + System.currentTimeMillis() + ".jpg";
    FileOutputStream fos = new FileOutputStream(fileName);

    if (fos != null) {
    bmp.compress(Bitmap.CompressFormat.JPEG, 90, fos);
    fos.close();
    }
    Toast.makeText(getApplicationContext(), "截图成功,文件名是:" + fileName, Toast.LENGTH_SHORT).show();
    } catch (Exception e) {
    e.printStackTrace();
    }
    }
    }
    });
    }
    }

     其中的x、y是经纬度可以通过定位的方式获取,imageUrl是sina微博的头像地址。 

         
     

         点击确定按钮即可截图 把图片存放到sd卡上。接下来就可以通过获取sd卡上图片的路径将图片上传到微博。 

    转自:http://fengzhizi715.iteye.com/blog/942740


  • 相关阅读:
    发布MeteoInfo 1.2.4
    发布MeteoInfo 1.2.3
    FY2E HDF格式数据处理绘图
    格点插值为站点数据批量处理
    Linux安装make无法使用
    sql语句优化
    在OSX狮子(Lion)上安装MYSQL(Install MySQL on Mac OSX)
    JetBrains IntelliJ IDEA for Mac 15.0 破解版 – Mac 上强大的 Java 集成开发工具
    Spring-data-redis: 分布式队列
    Spring Boot使用Redis进行消息的发布订阅
  • 原文地址:https://www.cnblogs.com/shanzei/p/2415268.html
Copyright © 2011-2022 走看看