概述：

最近碰到使用https://lbs.qq.com/tool/component-picker.html 地图选点组件，这个本来没啥，只是一个地址选点组件功能需求，但是测试说安卓9.0手机上那个定位按钮不能定位到当前位置，只能定位到当前城市。

QQ截图20190806090743.png
手机浏览器打开demo链接是可以定位的，猜测可能和权限有关系。

组件调用方式

方式一

https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp直接调用链接
key自己控制台申请。

方式二

通过iframe内嵌调用，地图选点组件的页面会根据开发者设置的iframe宽高自适应。
注：1、使用iframe调用时,为防止在大屏手机上字体过小，需在源码中加入meta信息，<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
2、开发者可以在自己的页面里通过iframe内嵌的方式调用该组件的时候，由于存在跨域的问题，需要通过html5 postMessage的方式回传用户选择的位置信息，开发者需要在自己的页面中实现一个监听函数，例如：

`<iframe id=``"mapPage"` `width=``"100%"` `height=``"100%"` `frameborder=0`

`src=``"[https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your](https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your) key&referer=myapp"``>`

`</iframe>`

`<script>`

`window.addEventListener(``'message'``,` `function``(event) {`

`// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息`

`var` `loc = event.data;`

`if` `(loc && loc.module ==` `'locationPicker'``) {``//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'`

`console.log(``'location'``, loc);`

`}`

`},` `false``);`

`</script>`

因为需要和webview交互获取经纬度，所以我是用第二种方式。

问题

Android9.0无法定位，网上说安卓运行权限要加上以下权限。

QQ截图20190806092127.png

上面权限加了后，运行还是不能定位，最后查询发现webview需要下面代码

      webSetting.setDatabaseEnabled(true);
      webSetting.setGeolocationEnabled(true);
      String dir = getContext().getDir("database", Context.MODE_PRIVATE).getPath();
      webSetting.setGeolocationDatabasePath(dir);

上面加了代码可能需要读写，需要加上READ_EXTERNAL_STORAGE和WRITE_EXTERNAL_STORAGE。webview优化后偶尔可以定位，奇葩的是有时候不能定位。但是定位问题没解决。
想了一会，定位权限都给了，webview页优化了，为什么不能定位。可能是定位方法问题。于是用电脑浏览器打开组件链接f12调试，发现应该是没有运行定位代码。
看了https://lbs.qq.com/tool/component-geolocation.html这些定位组件。在项目h5结构中加入以下代码

`<iframe id=``"geoPage"` `width=0 height=0 frameborder=0  style=``"display:none;"` `scrolling=``"no"`

`src=``"[https://apis.map.qq.com/tools/geolocation?key=your](https://apis.map.qq.com/tools/geolocation?key=your) key&referer=myapp"``>`

`</iframe>`

h5结构优化后，拿到定位经纬度不能给选点组件调用呀，腾讯也没有开源选点组件项目，目前不知道怎么去代码刷新地图页面。拿个了经纬度页没啥用。用户要的经纬度是最终选点的经纬度。

window.addEventListener('message', function(event) {
   // 接收位置信息
   var loc = event.data;
   console.log('location', loc);
}, false);

手机运行后第一次打开webview页面定位的还是当前城市，但是点击定位按钮就可以定位当前位置。第二次打开webview页面后就自定定位当前位置。定位问题解决了，还剩第一打开页面不能自定定位当前位置。

解决

以上问题是定位组件第一次定位js没有运行完，它是默认6秒响应 ,这时候地图渲染已经完成，定位了经纬度也没有，你不能刷新组件地图。
项目写到这里我不想为这点问题耽误我大好时间。我的解决是在webview运行时候，提前拿到定位经纬度。可以加上webView.loadUrl("http://map.qq.com/m/index/map");这个链接是包含js定位代码的。