实现类似街旁网的分享足迹功能

在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 mapInitx,y,imageUrl) {
var mapOptions = new MMapOptions);//构建地图辅助类
mapOptions.zoom=17;//要加载的地图的缩放级别
mapOptions.center=new MLngLatx,y);//要加载的地图的中心点经纬度坐标
mapOptions.toolbarPos = new MPoint15,15); //设置工具条在地图上的显示位置
mapOptions.overviewMap = HIDE; //设置鹰眼地图的状态,SHOW:显示,HIDE:隐藏(默认)
mapOptions.scale = HIDE; //设置地图初始化比例尺状态,SHOW:显示(默认),HIDE:隐藏。
mapOptions.returnCoordType = COORD_TYPE_OFFSET;//返回数字坐标
mapOptions.zoomBox = true;//鼠标滚轮缩放和双击放大时是否有红框动画效果。
mapObj=new MMap"map",mapOptions); //地图初始化
addMarkerOnMapx,y,imageUrl);
}
function addMarkerOnMapx,y,imageUrl){
var markerOption=new MMarkerOptions);
markerOption.imageUrl
=imageUrl;
markerOption.picAgent
=false;
var Marker = new MMarkernew MLngLatx,y),markerOption);
Marker.id
="mark";
mapObj.addOverlayMarker,
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 onCreateBundle savedInstanceState) {
super.onCreatesavedInstanceState);
setContentViewR.layout.main);
Button btn = Button) findViewByIdR.id.Btn);

final WebView wv = WebView) findViewByIdR.id.webview);

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

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

// 覆盖默认后退按钮的作用,替换成WebView里的查看历史页面
wv.setOnKeyListenernew View.OnKeyListener) {
public boolean onKeyView 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).setJavaScriptEnabledtrue);
wv.setWebViewClientnew WebViewClient) {
public boolean shouldOverrideUrlLoadingWebView view, String url) {
view.loadUrlurl);
return true;
}

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

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

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

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

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

     
 

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

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注