基於html5+webview五分鐘快速完成一個地圖選址組件

原創

2020-02-22 06:48

記錄一下，是個好思路，但不是個高深的技術

首先按照傳統的方式如果要做這樣一個位置選擇器控件，就要去下載地圖sdk，無論是百度還是高德，雖然地圖已經做了很多封裝，但是用起來還是很麻煩，比如要自己去寫listview，各種事件監聽，而需求只是需要選擇一個位置，然後進行位置分享或者其他。有沒有其他的方式呢？答案是肯定的，辦法也是我偶然間看到的。
騰訊有個基於html5的地圖選點組件，在騰訊地圖開放平臺可以看見，也有調用方式。
然後剩下html5和webview的數據交互就很簡單了，我貼一下代碼

import android.content.Context;
import android.content.SharedPreferences;
import android.graphics.Color;
import android.os.Handler;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

public class TMap extends AppCompatActivity {
    String wz_json;
    WebView mWebView;
    private Handler mHandler = new Handler();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tmap);

        mWebView= (WebView) findViewById(R.id.web);

        //設置編碼
        mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        //支持js
        mWebView.getSettings().setJavaScriptEnabled(true);
        //設置本地調用對象及其接口
        mWebView.addJavascriptInterface(new JavaScriptObject(this), "myObj");
        mWebView.loadUrl("file:///android_asset/map.html");

        findViewById(R.id.bt_cancel).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
        findViewById(R.id.bt_ok).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (wz_json!=null&&!wz_json.equals("")){
                    getSharedPreferences("set",MODE_PRIVATE).edit().putString("location",wz_json).commit();
                    showSnackbar("保存成功");
                    return;
                }
                showSnackbar("位置未選擇，不能保存");
            }
        });
    }
    public class JavaScriptObject {
        Context mContxt;
        public JavaScriptObject(Context mContxt) {
            this.mContxt = mContxt;
        }
        @JavascriptInterface //sdk17版本以上加上註解
        public void setLoc(String msg) {
            wz_json=msg;
        }
    }
    private void showSnackbar(String msg){
        Snackbar sBar = Snackbar.make(findViewById(R.id.relativeLayout2), msg, Snackbar.LENGTH_SHORT);
        Snackbar.SnackbarLayout ve = (Snackbar.SnackbarLayout)sBar.getView();
        ve.setBackgroundColor(Color.parseColor("#009966"));
        sBar.show();
    }

然後map.html的代碼，key需要你自己去申請一個，因爲這個代碼也是我從項目中剝離出來的，key就不分享了

<!DOCTYPE html>
<html>
<html><head lang="zh-CN"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="address=no">
    <title>地圖</title>
</head>
<body>

<iframe id="mapPage" width="100%" frameborder="0" scrolling="no" height="589" src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp">
</iframe>
<script>
    window.addEventListener('message', function(event) {
        // 接收位置信息，用戶選擇確認位置點後選點組件會觸發該事件，回傳用戶的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他應用也會向該頁面post信息，需判斷module是否爲'locationPicker'
          myObj.setLoc(JSON.stringify(loc));
        }
    }, false);
</script>
</body>
</html>