JS与Android —— 高德地图改变主题

为什么要用JS改变主题？

安卓中的高德地图API支持普通地图和卫星地图以及夜景模式地图的展示。
而JS中的高德地图API支持normal，dark(深色样式)，blue_night(夜空蓝样式)，fresh(浅色样式)，light(osm清新风格样式)五种主题！

---

项目结构

项目结构

可以看到，我们的assets文件夹下存放着我们即将交互的网页。

---

布局

布局

---

代码

主要代码

settings.setJavaScriptEnabled(true)这行代码使我们的WebView支持JS脚本语言。
安卓中调用JS的方法都是通过webView.loadUrl("javascript: JS的方法名('参数')")。

appMap.html

JS中的代码也是非常简单，我们自己写了一个refresh(type)方法来供Android调用。

---

来而不往非礼也

在Html中如何调用Android的方法呢？

代码

代码

我们在Android中定义了一个类JavaScriptObject，并且调用 webView.addJavascriptInterface(new JavaScriptObject(this), "jsObj")将Android中的JavaScriptObject对象和JS中的jsObj对象绑定起来，这里jsObj是随便取的，有意思的是在JS中并不需要new出来，而是可以直接调用jsObj对象的方法： jsObj.changeSuccess(type)。
有两点需要注意的是

1. 提供给JS对象的方法必须要@JavascriptInterface注解，这是Google出于安全性的考虑，老版本的SDK可能并不需要加。
2. 提供的方法必须要是Public。

---

效果图

最后来个最直观的Gif图吧~

effect.gif

---

补充

代码已上传Github https://github.com/ice45571/JsMap
webView调用多个参数的方法 webView.loadUrl("javascript: add('1','2')"); 补充时间：2016年12月27日15:01
webView支持alert弹窗 webView.setWebChromeClient(new WebChromeClient() {}); 补充时间：2016年12月27日15:02