vue与安卓原生定位的交互

网页定位的不足

我之前写了篇vue调用百度地图 js api实现定位的文章，
vue 实现定位到当前位置
但是实际使用的时候，发现百度定位js经常定位不精确，这个不足，官网也有提，

为了精确，还是使用原生app调用高德地图api来实现定位，这样就要用到js与原生的交互，js调用某个方法，然后触发原生的定位，原生定位完成，调用js方法，回传给js，我这边做的兼容性比较高，js传入不同的坐标系，原生会在回传给js的方法中，将坐标系转换

实现

vue定义方法
vue定义两个方法，方法getLocationFromNative(String type)，调起定位功能，type是坐标类型，默认gcj02，bd09:百度坐标系，gcj02:火星坐标系，gps：GPS坐标系(WGS84坐标系），原生提供根据type，转换坐标系的方法
定位成功或失败，回调notifyLocationFromApp，传入json数据，json数据自己组装，我这边是这样的

{"data":{"address":"xxx","city":"xx市",
"country":"中国","description":"在xx附近","district":"xx区","latitude":31.4xx8,
"locationDetail":"#csid:4d4xxx7039e594xx3",
"longitude":120.30xx1,"province":"xx省","street":"xx大道","streetNum":"xx号"}
,"isOk":true}
1
2
3
4
5

<template>
  <div class="phoneContant">
    <a :href="tel">点击拨打电话a>
    <van-button type="warning" @click="goToNext">进入下一页van-button>
    <van-button type="warning" @click="getLocation">从app获取定位van-button>
  div>
template>

<script>
//判断是否是安卓还是ios
var config = {
  isAndroid: /Android/i.test(navigator.userAgent), //判断是否为移动端
  isIos: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //判断是否为IOS
};
export default {
  name: "Home",
  data() {
    return {
      msg: "我是首页",
      store_info: {
        phone: 15xxxx753,
      },
      nativeLocationSuccess:false,
      loadDefault:false
    };
  },
  methods: {
    goToNext() {
      this.$router.push("/second");
    },
    getLocation() {
       setTimeout(() => {
          if(this.nativeLocationSuccess==false){
              console.log("定位失败，加载默认的接口");
              this.loadDefault=true
          }
        
      }, 10000);//10秒未返回数据，加载默认的，防止前端没有getLocationFromNative和notifyLocationFromApp回调
      /**
       * 经纬度坐标系，默认gcj02
        bd09:百度坐标系
        gcj02:火星坐标系
        gps：GPS坐标系(WGS84坐标系）
       */
      if (config.isAndroid && window.hesAndroidNative) {
        window.hesAndroidNative.getLocationFromNative("");
      } else if (config.isIos && window.webkit) {
        window.webkit.messageHandlers.getLocationFromNative.postMessage("");
      } else {
      }
     
    },
    notifyLocationFromApp(jsonStr) {
      this.nativeLocationSuccess=true;
      if(this.loadDefault==true){
          return
      }
      console.log("json string" + jsonStr);
      let valueObj=JSON.parse(jsonStr)
         console.log("valueObj " + valueObj);
      let value = jsonStr+"||||测试解析结果:"+valueObj.data.address

         if(valueObj.isOk==false){
      console.log("失败");
       }else{
           console.log("成功",valueObj.data.longitude, valueObj.data.latitude);
       }
      this.$dialog
        .alert({
          confirmButtonText: "是",
          closeOnClickOverlay: false,
          title: "提示",
          showCancelButton: false,
          messageAlign: "center",
          message: value,
        })
        .then(() => {
          return false;
        })
        .catch(() => {});
    },
  },
  computed: {
    tel() {
      return "tel:" + Number(this.store_info.phone);
    },
  },
  created() {
       window.notifyLocationFromApp = this.notifyLocationFromApp;
      this.getLocation()
  },
};
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

大概逻辑就是进入页面调用原生的定位，然后等待10s，10秒未返回数据，加载默认的，防止前端没有getLocationFromNative和notifyLocationFromApp回调，因为js如果检测到方法未定义，直接报错，也没回调，这样写，能保证程序正常运行
原生实现

public class WebviewBase extends BaseCompatActivity{

    @BindView(R.id.iv_back)
    protected ImageView ivBack;
    @BindView(R.id.iv_close)
    protected ImageView ivClose;
    @BindView(R.id.tv_title)
    protected TextView tvTitle;
    @BindView(R.id.rl_top)
    protected  RelativeLayout rlTop;
    @BindView(R.id.pbar_more)
    protected ProgressBar progressBar;
    @BindView(R.id.webView)
    protected WebView webView;
    protected LocationReslut locationReslut=new LocationReslut();
    protected AMapLocationClient mLocationClient = null;
    protected String locationType="";
    protected AMapLocationListener mLocationListener = new AMapLocationListener()
    {
        @Override
        public void onLocationChanged(AMapLocation aMapLocation)
        {
            if (aMapLocation != null)
            {
                if (aMapLocation.getErrorCode() == 0)
                {
                    LocationReslut.Data locationData=locationReslut.new Data();
                    locationData.setAddress(aMapLocation.getAddress());
                    locationData.setCity(aMapLocation.getCity());
                    locationData.setCountry(aMapLocation.getCountry());
                    locationData.setStreetNum(aMapLocation.getStreetNum());
                    locationData.setStreet(aMapLocation.getStreet());
                    locationData.setDistrict(aMapLocation.getDistrict());
                    locationData.setProvince(aMapLocation.getProvince());
                    locationData.setLatitude(aMapLocation.getLatitude());
                    locationData.setLongitude(aMapLocation.getLongitude());
                    locationReslut.setData(locationData);
                    locationReslut.setOk(true);

                    locationResultToJs();

                    mLocationClient.stopLocation();
                }
                else
                {
                    locationResultToJs();
                    Log.e("定位错误", aMapLocation.getErrorCode() + ":" + aMapLocation.getErrorInfo());
                }
            }
            else
            {

                locationResultToJs();
                Log.e("定位失败", "");
            }
        }
    };

    private void locationResultToJs() {
        Gson gson = new Gson();
        Log.i("location",gson.toJson(locationReslut));
        LocationReslut.Data data=locationReslut.getData();
        if(locationReslut.isOk){
            double[] gps=null;
            switch (locationType){
                case "bd09":
                    gps= GPSUtil.gcj02_To_Bd09(data.getLatitude(),data.getLongitude());
                    data.setLatitude(gps[0]);
                    data.setLongitude(gps[1]);
                    break;
                case "gps":
                    gps= GPSUtil.gcj02_To_Gps84(data.getLatitude(),data.getLongitude());
                    data.setLatitude(gps[0]);
                    data.setLongitude(gps[1]);
                    break;
                default:
                    break;
            }
        }

        //原生回调js通知
        webView.evaluateJavascript("javascript:notifyLocationFromApp('" + gson.toJson(locationReslut) + "')", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此处为 js 返回的结果

            }
        });
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview_privacy);
        ButterKnife.bind(this);
        initWebView();
			init();
        locationReslut.setData(null);
        locationReslut.setOk(false);
        ....省略各种初始化方法
    }

    protected void init()
    {
        mLocationClient = new AMapLocationClient(WebviewBase.this);

        mLocationClient.setLocationListener(mLocationListener);
        if (ActivityCompat.checkSelfPermission(WebviewBase.this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED)
        {
            ActivityCompat.requestPermissions(WebviewBase.this, new String[]{Manifest.permission.ACCESS_FINE_LOCATION}, 100);
        }
        else
        {
            //mLocationClient.startLocation();
        }
    }
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults)
    {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }


    private void initWebView() {

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        // 设置字符编码
        webSettings.setDefaultTextEncodingName("utf-8");
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setLoadsImagesAutomatically(true);
        // webSettings.setAppCacheEnabled(true);
        webSettings.setBlockNetworkImage(false);
        // webSettings.setGeolocationEnabled(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        webSettings.setDefaultTextEncodingName("UTF-8");
        webSettings.setSupportZoom(true);
        // webSettings.setBuiltInZoomControls(true);
        // webSettings.setPluginsEnabled(true);
        //webView.addJavascriptInterface(this, "AppInterface");

        webSettings.setDomStorageEnabled(true);
        webSettings.setDatabaseEnabled(true);
        final String dbPath = getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath();
        webSettings.setDatabasePath(dbPath);

        final String cachePath = getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
        webSettings.setAppCachePath(cachePath);
        webSettings.setAppCacheMaxSize(10 * 1024 * 1024);
        //设置加载进来的页面自适应手机屏幕
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);


        webView.setWebChromeClient(new MyWebChromeClient());
        webView.setWebViewClient(new MyWebViewClient());

        if (userAgent != null && !StringUtil.isEmpty(userAgent)) {
            String ua = webSettings.getUserAgentString();// 获取默认的UA
            webSettings.setUserAgentString(ua + "; " + userAgent);// UA追加自定义标识符
        }

        // 通过addJavascriptInterface()将Java对象映射到JS对象
        //参数1：Javascript对象名
        //参数2：Java对象名
   
        webView.addJavascriptInterface(new HesAndroidtoJs(), "hesAndroidNative");

    }
    // 继承自Object类
    public class HesAndroidtoJs 
    {

        // 定义JS需要调用的方法
        // 被JS调用的方法必须加入@JavascriptInterface注解


        @JavascriptInterface
        public void getDomainDataFromNative() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    //原生回调js通知
                    webView.evaluateJavascript("javascript:notifyDomainDataFromApp('" + domainData + "')", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String value) {
                            //此处为 js 返回的结果

                        }
                    });
                }
            });

        }
        /**
         * 经纬度坐标系，默认gcj02
         * bd09:百度坐标系
         * gcj02:火星坐标系
         * gps：GPS坐标系(WGS84坐标系）
         * @param type
         */
        @JavascriptInterface
        public void getLocationFromNative(String type) {
            locationType=type;
            if(mLocationClient!=null){
                mLocationClient.startLocation();
            }

        }
    }

    private class LocationReslut{
        private boolean isOk;
        private Data data;

        public boolean isOk() {
            return isOk;
        }

        public void setOk(boolean ok) {
            isOk = ok;
        }

        public Data getData() {
            return data;
        }

        public void setData(Data data) {
            this.data = data;
        }
        public class Data{
            String country;
            String province;
            String city;
            String street;
            String streetNum;
            String address;
            double latitude;
            double longitude;
            String district;

            public String getCountry() {
                return country;
            }

            public void setCountry(String country) {
                this.country = country;
            }

            public String getProvince() {
                return province;
            }

            public void setProvince(String province) {
                this.province = province;
            }

            public String getCity() {
                return city;
            }

            public void setCity(String city) {
                this.city = city;
            }
            public String getStreet() {
                return street;
            }

            public void setStreet(String street) {
                this.street = street;
            }

            public String getStreetNum() {
                return streetNum;
            }

            public void setStreetNum(String streetNum) {
                this.streetNum = streetNum;
            }

            public String getAddress() {
                return address;
            }

            public void setAddress(String address) {
                this.address = address;
            }

            public double getLatitude() {
                return latitude;
            }

            public void setLatitude(double latitude) {
                this.latitude = latitude;
            }

            public double getLongitude() {
                return longitude;
            }

            public void setLongitude(double longitude) {
                this.longitude = longitude;
            }

            public String getDistrict() {
                return district;
            }

            public void setDistrict(String district) {
                this.district = district;
            }


        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(mLocationClient!=null){
            mLocationClient.stopLocation();
        }

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329

GPSUtil

public class GPSUtil
{
    public static double pi = 3.1415926535897932384626;
    public static double x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    public static double a = 6378245.0;
    public static double ee = 0.00669342162296594323;

    public static double transformLat(double x, double y)
    {
        double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
        return ret;
    }

    public static double transformLon(double x, double y)
    {
        double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
        return ret;
    }

    public static double[] transform(double lat, double lon)
    {
        if (outOfChina(lat, lon))
        {
            return new double[]{lat, lon};
        }
        double dLat = transformLat(lon - 105.0, lat - 35.0);
        double dLon = transformLon(lon - 105.0, lat - 35.0);
        double radLat = lat / 180.0 * pi;
        double magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        double sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
        double mgLat = lat + dLat;
        double mgLon = lon + dLon;
        return new double[]{mgLat, mgLon};
    }

    public static boolean outOfChina(double lat, double lon)
    {
        if (lon < 72.004 || lon > 137.8347)
            return true;
        if (lat < 0.8293 || lat > 55.8271)
            return true;
        return false;
    }

    /**
     * 84 to 火星坐标系 (GCJ-02) World Geodetic System ==> Mars Geodetic System
     *
     * @param lat
     * @param lon
     * @return
     */
    public static double[] gps84_To_Gcj02(double lat, double lon)
    {
        if (outOfChina(lat, lon))
        {
            return new double[]{lat, lon};
        }
        double dLat = transformLat(lon - 105.0, lat - 35.0);
        double dLon = transformLon(lon - 105.0, lat - 35.0);
        double radLat = lat / 180.0 * pi;
        double magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        double sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
        double mgLat = lat + dLat;
        double mgLon = lon + dLon;
        return new double[]{mgLat, mgLon};
    }

    /**
     * * 火星坐标系 (GCJ-02) to 84 * * @param lon * @param lat * @return
     */
    public static double[] gcj02_To_Gps84(double lat, double lon)
    {
        double[] gps = transform(lat, lon);
        double lontitude = lon * 2 - gps[1];
        double latitude = lat * 2 - gps[0];
        return new double[]{latitude, lontitude};
    }

    /**
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 将 GCJ-02 坐标转换成 BD-09 坐标
     *
     * @param lat
     * @param lon
     */
    public static double[] gcj02_To_Bd09(double lat, double lon)
    {
        double x = lon, y = lat;
        double z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
        double theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
        double tempLon = z * Math.cos(theta) + 0.0065;
        double tempLat = z * Math.sin(theta) + 0.006;
        double[] gps = {tempLat, tempLon};
        return gps;
    }

    /**
     * * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 * * 将 BD-09 坐标转换成GCJ-02 坐标 * * @param
     * bd_lat * @param bd_lon * @return
     */
    public static double[] bd09_To_Gcj02(double lat, double lon)
    {
        double x = lon - 0.0065, y = lat - 0.006;
        double z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
        double theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
        double tempLon = z * Math.cos(theta);
        double tempLat = z * Math.sin(theta);
        double[] gps = {tempLat, tempLon};
        return gps;
    }

    /**
     * 将gps84转为bd09
     *
     * @param lat
     * @param lon
     * @return
     */
    public static double[] gps84_To_bd09(double lat, double lon)
    {
        double[] gcj02 = gps84_To_Gcj02(lat, lon);
        double[] bd09 = gcj02_To_Bd09(gcj02[0], gcj02[1]);
        return bd09;
    }

    public static double[] bd09_To_gps84(double lat, double lon)
    {
        double[] gcj02 = bd09_To_Gcj02(lat, lon);
        double[] gps84 = gcj02_To_Gps84(gcj02[0], gcj02[1]);
        //保留小数点后六位
        gps84[0] = retain6(gps84[0]);
        gps84[1] = retain6(gps84[1]);
        return gps84;
    }

    /**
     * 保留小数点后六位
     *
     * @param num
     * @return
     */
    private static double retain6(double num)
    {
        String result = String.format("%.6f", num);
        return Double.valueOf(result);
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

总结

这个只是拿定位做个例子，其实这个就是原生和js交互的通用方法，可以直接使用，完成其他需要相互交互的逻辑