android 与地图互动,一个简单的基于Leaflet样式的多图层安卓地图应用

BULABULA

这是 Mobile Cartography 课程的 project，看DDL还有四天就不慌不慢的花了三个半天写了个差不多，但是因为心态爆的太早了导致获取用户地理位置的功能一直出现fatal error虽然后来发现问题很明显却还是花了整整一天半才改掉。就很气。就决定来写这篇文章降降燥。

Map in Colour 的设计初衷是希望能给那些喜欢自由的探索一个城市的少年们一个较为直观的，城市内功能性POI分布的类别地图。

无需太多复杂的功能，我就是想展示，那条大街上密布餐馆，而那条大街上全是博物馆etc.....

Git地址.

Map in Colour

主界面UI部分结构介绍

用DrawerLayout+Toolbar实现。

DrawerLayout 的第一部分子布局既是主视图，第二部分android.support.design.widget.NavigationView则是侧边栏。可参考简书这篇文章，Android DrawerLayout.

主布局文件activity_maps.xml结构如下：

|

|

| |

| |

|

在LinerLayout主视图内，布局从上到下为一个Toolbar，一个RelativeLayout /(Button+WebView).

这个Button是因为leaflet地图没有提供好用的用户位置location API，必须要自己写一个按钮来实现Location+SetMapView的功能. WebView 用来显示HTML文件.

A WebView is a View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

Note that, in order for your Activity to access the Internet and load web pages in a WebView, you must add the INTERNET permission to your Android Manifest file as a child of the element:

By default, a WebView provides no browser-like widgets, does not enable JavaScript and web page errors are ignored. If your goal is only to display some HTML as a part of your UI, this is probably fine; the user won't need to interact with the web page beyond reading it, and the web page won't need to interact with the user. If you actually want a full-blown web browser, then you probably want to invoke the Browser application with a URL Intent rather than show it with a WebView.

所以，也就是说，用户是和这个MapView没有任何互动的. 但是当然这个工程也没有考虑这个需求 XD

主界面里Toolbar, DrawerLayout, NavigationView,WebView的初始化

Toolbar

首先，在主Activity，MapsActivity.java里初始化Toolbar. 最后一行 myToolbar.inflateMenu 用来关联一个menu文件夹下的menu布局文件，实现 Toolbar 右侧的下拉菜单.

Toolbar myToolbar = (Toolbar) findViewById(my_toolbar);

myToolbar.setTitle("Map in colour");

myToolbar.setTitleTextColor(Color.WHITE);

myToolbar.inflateMenu(R.menu.button_clear);

Toolbar右侧下拉菜单布局是放在res/menu文件夹下的button_clear.xml文件.

内部有两个item，help和info.

点击Help后启动第二个Activity来展示图例说明.

点击info后在主界面上显示一段文字(开发者信息).

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/action_item"

android:title="@string/menu_item_01"

app:showAsAction="never" />

android:id="@+id/action_item0"

android:title="@string/menu_item_02"

app:showAsAction=