「街旁网」【原创】实现类似街旁网的分享足迹功能

街旁网

[color=red]转载请注明出处[/color]

在sina微博上看到街旁网的客户端有一个分享足迹的功能，它可以显示我当前的位置，将微博头像标识在地图上作为我的当前位置，我觉得这个功能很酷，我也想在自己的APP上加上这个功能。

由此开始了如下的研究：）

首先将头像标识在地图上很简单，问题的关键是作为Android客户端我们需要将图片上传到sina微博，那就需要对当前地图进行截屏，将图片保存在sd卡上。这个是个难题，在我研究的时候android2.3.3版本还没出现，这个版本据说开放了截图功能，可以使用surfaceflinger API 截取到屏幕画面。

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

布局如下：

<?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，因为我看到街旁也是用这个：）

<!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> 
<p id="map" style="width:360px; height:450px"></p> 
</body> </html>

[color=red]其中这里的key需要自己申请。[/color]

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

最后，我们需要一个activiy：

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微博的头像地址。

[img]http://dl.iteye.com/upload/attachment/430449/c6236543-8ee4-3e56-bcc1-061f8b444363.png[/img]

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

顺便做个广告，此功能在时客地图1.7中已经实现，具体可查看我另外的帖子：http://fengzhizi715.iteye.com/blog/938997

【原创】实现类似街旁网的分享足迹功能

街旁网

相关阅读

栏目导航

推荐阅读

热门阅读