上兩篇文章我們介紹使用了百度地圖的一些功能，這一篇文章我打算在原來的基礎上對界面做一些美化腌闯，當然這個美化是基于我們百度地圖绳瘟，高德地圖的UI界面來處理，我們對這個界面進行模仿姿骏。
我也希望這個Demo最后不僅僅是個Demo糖声，而是能拿的出手的一個像樣的APP。
首先我們看一下百度的主界面分瘦。
我們分析一下主界面蘸泻，一個搜索框，一個羅盤圖標嘲玫，一排功能鍵悦施，一個定位按鈕和上報按鈕，一個路線按鈕和一個底欄去团。當然我們今天不是從做UI入手抡诞，而是先解決一些和地圖相關的界面細節(jié)穷蛹。
1.定位圖層相關
上一篇文章我們實現(xiàn)了定位圖層，也就是那個小藍點昼汗，可是小藍點還是不夠的肴熏，我們還能更進一步操作。
先看一下修改后的代碼
lati_ = bdLocation.getLatitude();
long_ = bdLocation.getLongitude();
//顯示定位圖標
MyLocationData locData = new MyLocationData.Builder()
// 不顯示半徑圓圈
.accuracy(0)
// 此處設置開發(fā)者獲取到的方向信息乔遮，順時針0-360
.direction(bdLocation.getDirection()).latitude(lati_)
.longitude(long_).build();
//使用自定義圖標
BitmapDescriptor mIconLocation = BitmapDescriptorFactory.fromResource(R.drawable.main_icon_follow);
//配置（定位模式扮超，允許顯示方向，圖標）
MyLocationConfiguration configuration
=new MyLocationConfiguration(LocationMode.COMPASS,true,mIconLocation);
//設置定位圖層配置信息蹋肮，只有先允許定位圖層后設置定位圖層配置信息才會生效出刷，參見 setMyLocationEnabled(boolean)
baidumap.setMyLocationConfiguration(configuration);
baidumap.setMyLocationData(locData);
首先我們看到我們的 .accuracy(0)是修改過的，這里是控制半徑的顯示坯辩，這里設置0為不顯示馁龟，
其次可以看到修改后的代碼主要增加了MyLocationConfiguration，
而我們來詳細看一下這個對象構造方法所接受的3個參數(shù)漆魔，第一個是定位模式坷檩，這里主要分為3種模式
LocationMode.FOLLOWING //跟隨：小圓點箭頭顯示方向
LocationMode.NORMAL //默認：小圓點，沒有方向顯示
LocationMode.COMPASS //羅盤：帶東南西北的虛線圈
我們一般會選擇羅盤模式改抡，反正我在實際生活中使用地圖就覺得羅盤模式很方便矢炼，哈哈。（老掉向啦０⑾恕）
第二個參數(shù)是我們設置是否允許顯示方向句灌，true的話是允許，然后我們就可以看到方向欠拾，但是還不要著急胰锌，這里面有大文章呢。
第三個是一個圖標配置藐窄，我這里用了下面這張圖
這個常見的定位圖標资昧。當然如果我們傳入null，也是會顯示這個圖標的荆忍，只不過是百度帶的
這里我們看到我們的效果是這個樣紙滴格带。（分辨率還可以，我是把他放在xhdpi文件夾里的）
那么我們再來討論一下這個方向的問題刹枉。
細心的讀者可能已經(jīng)看到 .direction(bdLocation.getDirection())代碼上面的注釋了叽唱，開發(fā)者設置獲取到的方向信息，那么這句話的意思是什么嘶卧？我們不是已經(jīng)給了bdLocation.getDirection()了么？
如果有跟著我們一步一步坐下來的可能就會發(fā)現(xiàn)凉袱，我們的圖標根本不會隨著方向動芥吟，就算不寫在if條件里面也不會侦铜。確實是這樣的。
因為我們bdLocation.getDirection()是有要求的钟鸵，那就是option,我們要給他允許钉稍，他才能獲取方向。
option.setNeedDeviceDirect(true); //需要設備方向
當你設置這一句之后（注意暫時把定位圖層代碼移到if語句外面棺耍，我們要看本次的運行結果）贡未，你再運行發(fā)現(xiàn)，一卡一卡的蒙袍。 確實因為你設置的定位時間span俊卤，導致它一卡一卡不能實時獲取方向信息，那我們能怎么解決這個問題呢害幅？
答案是利用手機自帶的方向傳感器消恍。
2017年8月2日13:45:27 繼續(xù)更新
昨天陸陸續(xù)續(xù)的遇到一些小問題，不過現(xiàn)在已經(jīng)陸續(xù)解決了霜瘪，由于我也是邊學邊寫兴溜，所以有什么問題還請大神多多指教运敢。
那么我們回到正題，我們怎么才能讓百度地圖和手機傳感器結合到一起呢佣赖？
首先肯定是我們的傳感信息獲取,這部分代碼是參考鴻洋大神在慕課視頻寫的，在這里面我們提供了一個start方法和一個stop方法记盒，分別控制傳感器的啟動和結束憎蛤，在啟動方法里我們主要是獲取方向傳感器并注冊，stop方法主要是解除注冊孽鸡，在重寫的方法里監(jiān)聽方向變化蹂午，通過接口來對外公布數(shù)據(jù)。
package com.surine.onemap;
import android.content.Context;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
/**
* Created by surine on 2017/8/1.
*/
public class MyOrientationListener implements SensorEventListener {
//傳感器管理
private SensorManager mySensorManager;
//傳感器
private Sensor mySensor;
private Context myContext;
//x軸坐標
private float lastX;
//監(jiān)聽器
private onOrientationListener myOrientationListener;
public void start(){//開啟方向傳感器
//先通過系統(tǒng)服務來得到傳感器管理對象mySensorManager
mySensorManager=(SensorManager) myContext.getSystemService(Context.SENSOR_SERVICE);
if (mySensorManager!=null) {//如果傳感器管理對象不為空彬碱，則可以通過傳感器管理對象來獲得方向傳感器對象
//獲得方向傳感器對象
mySensor=mySensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION);
}
if (mySensor!=null) {//如果方向傳感器不為空豆胸，則給該方向傳感器注冊監(jiān)聽事件
//傳入，監(jiān)聽器巷疼，傳感器對象晚胡，傳感精度
mySensorManager.registerListener(this, mySensor, SensorManager.SENSOR_DELAY_GAME);
}
}
public void stop(){//解除注冊方向傳感器監(jiān)聽事件
mySensorManager.unregisterListener(this);
}
//構造方法
public MyOrientationListener(Context myContext) {//方向傳感器的一個構造器
super();
this.myContext = myContext;
}
@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
// TODO Auto-generated method stub
}
//監(jiān)聽方向發(fā)生變化
@Override
public void onSensorChanged(SensorEvent event) {//精度發(fā)生改變的時候
if (event.sensor.getType()==Sensor.TYPE_ORIENTATION) {//如果是方向傳感器
float x=event.values[SensorManager.DATA_X];//獲得傳感器的X軸的坐標,可以返回3個值，即X軸的坐標嚼沿，Y軸坐標估盘，Z軸坐標，我們只需要X軸坐標
if (Math.abs(x-lastX)>1.0) {//對比本次的X坐標的變化比上一次的變化差大于1.0就說明方向發(fā)生改變
if (myOrientationListener!=null) {//說明主界面已經(jīng)注冊了事件骡尽，即不為空遣妥，然后產(chǎn)生一個回調(diào)將實時變化X軸的坐標傳入
//通過一個回調(diào)方法，通知主界面去更新UI
myOrientationListener.onOrientationChanged(lastX);//就需要把上一次的X軸坐標傳入攀细，在MainActivity中的回調(diào)方法中去獲取即可
}
}
lastX=x;
}
}
public void setMyOrientationListener(onOrientationListener myOrientationListener) {
this.myOrientationListener = myOrientationListener;
}
//寫一個接口實現(xiàn)方向改變的監(jiān)聽產(chǎn)生的回調(diào)
public interface onOrientationListener{
void onOrientationChanged(float x);//回調(diào)的方法
}
}
那么怎么使用呢箫踩？
首先我們在主活動管理傳感器爱态，
@Override
protected void onStop() {
super.onStop();
···省略代碼
myOrientationListener.stop();
}
@Override
protected void onStart() {
super.onStart();
myOrientationListener.start();
}
我們讓傳感器的啟動與停止符合活動的周期,然后增加一個方法來監(jiān)聽傳感數(shù)據(jù)
/**
* 定位結合方向傳感器，從而可以實時監(jiān)測到X軸坐標的變化境钟，從而就可以檢測到
* 定位圖標方向變化锦担，只需要將這個動態(tài)變化的X軸的坐標更新myCurrentX值，
* 最后在MyLocationData data.driection(myCurrentX);
* */
private void useLocationOrientationListener() {
myOrientationListener=new MyOrientationListener(MainActivity.this);
myOrientationListener.setMyOrientationListener(new onOrientationListener() {
@Override
public void onOrientationChanged(float x) {//監(jiān)聽方向的改變慨削，方向改變時洞渔，需要得到地圖上方向圖標的位置
//聲明一個double型的臨時變量，記錄傳感方向
myCurrentX=x;
}
});
}
這個方法在初始化client的時候調(diào)用即可缚态。
最后我們看看拿到的值怎么使用
MyLocationData locData = new MyLocationData.Builder()
.accuracy(0)
// 此處設置開發(fā)者獲取到的方向信息磁椒，myCurrentX
.direction(myCurrentX).latitude(lati_)
.longitude(long_).build();
baidumap.setMyLocationData(locData);
可以看到，這樣我們的傳感器就和地圖結合起來了猿规，我們趕緊來運行一下衷快。
咦？怎么一卡一卡的姨俩？
是我手機配置不行么蘸拔？可是我看人家百度地圖好好的啊，非常順暢环葵。
卡就對了调窍，而且還會根據(jù)span的周期卡頓呢！
我這么一說你可能明白點什么张遭，我們把MyLocationData 這一段代碼寫在了moveTo方法里了邓萨，而這段代碼是誰調(diào)用的，答案就是位置監(jiān)聽器LocationListener菊卷，而我們之前說過缔恳，為了節(jié)省電量，這個類的接收函數(shù)不會一直運行洁闰，而是根據(jù)span間隔運行歉甚，而span最低數(shù)為1000，也就是一秒扑眉，所以你的方向也會跟著一秒卡一下一秒卡一下纸泄，那么這樣我們也就知道這段代碼該往哪里寫了，
當然是方向傳感器的監(jiān)聽器里面啦腰素，老鐵聘裁！
此時我們的代碼變成了這樣，
private void useLocationOrientationListener() {
myOrientationListener=new MyOrientationListener(MainActivity.this);
myOrientationListener.setMyOrientationListener(new onOrientationListener() {
@Override
public void onOrientationChanged(float x) {//監(jiān)聽方向的改變弓千，方向改變時衡便，需要得到地圖上方向圖標的位置
myCurrentX=x;
MyLocationData locData = new MyLocationData.Builder()
.accuracy(0)
// 此處設置開發(fā)者獲取到的方向信息
.direction(myCurrentX).latitude(lati_)
.longitude(long_).build();
baidumap.setMyLocationData(locData);
}
});
}
再次運行，哇哦，那絲滑……簡直不敢想象镣陕，想要更明顯的看到征唬，切換到羅盤模式看看效果。
可以說到這茁彭，我們已經(jīng)實現(xiàn)了方向的顯示，下面是一段小插曲扶歪。
過場休息……
我們也玩了這么久的百度地圖了理肺，也遇到不少問題，我覺得頭頭都要大了（努力賣萌善镰，喵~）妹萨，我們不如做一點放松的事情，美化一下界面炫欺。
嗯哼乎完，還是有點百度地圖的意思，不過咱這個更Material Design一點品洛，可以看出狀態(tài)欄的效果树姨，頂部欄的效果，都是朝著MD的感覺走的桥状，那么我們看看源代碼帽揪。
我這里是在Android Studio里面直接使用了抽屜那個界面的模板
它在這里是分文件寫的。
【文件：content_main.xml】
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.surine.onemap.MainActivity"
xmlns:android="http://schemas.android.com/apk/res/android">
<com.baidu.mapapi.map.MapView
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
/>
<TextView
android:id="@+id/first"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Hello World!"
android:visibility="gone"
/>
<ImageView
android:id="@+id/my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="30dp"
android:layout_marginLeft="30dp"
android:elevation="5dp"
android:background="@drawable/circle_shape"
android:padding="10dp"
android:src="@drawable/main_icon_location" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_marginTop="32dp"
android:layout_width="match_parent"
android:layout_height="52dp"
android:background="#fff"
android:elevation="4dp"
app:titleMargin="5dp"
app:theme="@style/ToolbarTheme"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
【文件：activty_main.xml】
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<include layout="@layout/content_main"/>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
之所以都貼上來是為了讓大家看看有一些屬性的配置辅斟，比如說android:fitsSystemWindows可能影響透明化狀態(tài)欄的顯示
那么我們的透明化狀態(tài)欄還需要的操作就是在activity里面配置
setContentView(R.layout.activity_main);
//在 setContentView(R.layout.activity_main);后面開始寫
在SDK21上的效果转晰，這里我們只兼容Android5.0以上
if (Build.VERSION.SDK_INT >= 21) {
View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
//經(jīng)測試發(fā)現(xiàn) 半透明 #50000000 顏色比較符合規(guī)范
getWindow().setStatusBarColor(Color.parseColor("#50000000"));
}
接下來我們調(diào)整一下toolbar的標題顏色
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//給一個淺一點的灰色
toolbar.setTitleTextColor(getResources().getColor(R.color.text));
好了，上面已經(jīng)差不多了士飒，我們看看下面查邢，可以看到我們這里有一個按鈕，相信大家也已經(jīng)猜到了酵幕，這個就是用來手動定位的扰藕，我們在他的監(jiān)聽器里寫定位邏輯就OK
具體的方法寫在下面了，這個方法在我們的onCreate()里調(diào)用即可
好現(xiàn)在我們分析一下代碼裙盾。
- 行1：findviewbyid实胸，沒啥好說的
- 行2：設置監(jiān)聽，也是很常見的寫法
- switch：在onclick方法里面有這么一個switch語句番官，這個主要是給我們的按鈕增加了一個多用的功能庐完，點擊切換定位模式，首先我們的mCurrentMode默認值為Location.NORMAL,然后點擊事件根據(jù)當前的mCurrentMode切換
- case ：我們分析其中一個case選項徘熔，首先是定位賦值门躯，這個必須的，因為我們要改變定位模式酷师，賦值之后開始真正設置定位模式
然后我們調(diào)整地圖角度讶凉，這個也是模仿百度地圖等做的染乌，根據(jù)當前方向調(diào)整角度，使用了rotate方法和overlook方法懂讯，然后加一個zoom縮放荷憋，使用animateMapStatus更新地圖view
這里還有一個設置圖標的方法，主要是為了區(qū)分兩種定位模式褐望，我做了一個藍色一個灰色的圖標勒庄，來互相切換
private void MyLocationButton() {
location_icon = (ImageView) findViewById(R.id.my_location);
location_icon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
switch (mCurrentMode) {
case NORMAL:
//定位模式賦值
mCurrentMode = LocationMode.COMPASS;
//配置定位模式
baidumap.setMyLocationConfiguration(new MyLocationConfiguration(
mCurrentMode, true, mCurrentMarker));
//調(diào)整地圖角度，設置圖標
location_icon.setImageResource(R.drawable.main_icon_location_compass);
MapStatus.Builder builder = new MapStatus.Builder();
builder.rotate(myCurrentX).overlook(0).zoom(18f);
baidumap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build()));
break;
case COMPASS:
mCurrentMode = LocationMode.NORMAL;
baidumap.setMyLocationConfiguration(new MyLocationConfiguration(
mCurrentMode, true, mCurrentMarker));
MapStatus.Builder builder1 = new MapStatus.Builder();
location_icon.setImageResource(R.drawable.main_icon_location);
builder1.rotate(0).overlook(0).zoom(18f);
baidumap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder1.build()));
break;
default:
break;
}
}
});
}
這里我再貼一下moveto的代碼瘫里，梳理一下邏輯
//地圖控制方法
private void moveTo(final BDLocation bdLocation) {
lati_ = bdLocation.getLatitude();
long_ = bdLocation.getLongitude();
mCurrentAccracy = bdLocation.getRadius();
//默認配置
baidumap.setMyLocationConfiguration(new MyLocationConfiguration(
mCurrentMode, true, mCurrentMarker));
if(isFirstLocate){
isFirstLocate = false;
baidumap.setMyLocationConfiguration(new MyLocationConfiguration(
mCurrentMode, true, null));
LatLng ll = new LatLng(lati_,long_);
update = MapStatusUpdateFactory.newLatLng(ll);
baidumap.animateMapStatus(update);
new Thread(new Runnable() {
@Override
public void run() {
try {
//延時動畫縮放
Thread.sleep(300);
update = MapStatusUpdateFactory.zoomTo(18f);
baidumap.animateMapStatus(update);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
}
這些代碼大家都已經(jīng)見到過实蔽，沒啥新奇的東西,
最后我們的監(jiān)聽器也修改了一下，主要去掉了第一篇文章的文字顯示谨读，加上一些防空判斷局装，和settitle設置一些toolbar上顯示的文字
//接受位置信息
@Override
public void onReceiveLocation(final BDLocation bdLocation) {
// map view 銷毀后不在處理新接收的位置
if (bdLocation == null || mmap == null) {
return;
}
baidumap.clear();
//調(diào)用設置方法
moveTo(bdLocation);
runOnUiThread(new Runnable() {
@Override
public void run() {
if(!bdLocation.getLocationDescribe().equals("")){
setTitle(bdLocation.getLocationDescribe());
}else{
setTitle(R.string.app_name);
}
}
});
}
到此為止我們已經(jīng)實現(xiàn)了自動定位，手動定位劳殖。那么接下來我們繼續(xù)回到SDK铐尚。
地圖子控件處理
我們可以看到在我們的地圖上有很多其他的東西，比如說標尺哆姻，百度LOGO塑径，縮放控件，羅盤填具，等等等等统舀，其實這些東西都可以拿來修改處理，于是乎我單獨寫了這么一個方法來處理這些元素劳景，讓界面變得更加整潔誉简。
在初始化地圖的時候，調(diào)用這個方法盟广，可以看到我們隱藏了比例尺闷串，縮放控件，百度logo筋量，調(diào)整了羅盤位置
private void changeDefaultBaiduMapView(MapView mmap) {
// 隱藏地圖上比例尺
mmap.showScaleControl(false);
// 隱藏地圖縮放控件
mmap.showZoomControls(false);
//羅盤位置
baidumap.setCompassPosition(new Point(70,250));
// 隱藏百度的LOGO
View child = this.mmap.getChildAt(1);
//原理也就是在view里面找到一個iamgeview（也就是logo）烹吵，然后隱藏
if (child != null && (child instanceof ImageView)) {
child.setVisibility(View.INVISIBLE);
}
}
我們打算實現(xiàn)一個自定義的縮放控件，首先看一下我們修改的布局文件桨武，我們這里省略了一些代碼（注意toolbar一定要放在最后面肋拔，因為他是z軸上離我們最近的，防止被mapview覆蓋）
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.surine.onemap.MainActivity"
xmlns:android="http://schemas.android.com/apk/res/android">
···· 省略的代碼
<RelativeLayout
android:id="@+id/ZoomControlView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff"
android:elevation="2dp"
android:layout_marginRight="5.0dip"
android:layout_centerVertical="true"
android:layout_alignEnd="@+id/toolbar">
<Button
android:id="@+id/zoomin"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="40dip"
android:layout_height="45dip"
android:textSize="18sp"
android:text="+"/>
<Button
android:id="@+id/zoomout"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="40dip"
android:layout_height="45dip"
android:textSize="18sp"
android:layout_below="@+id/zoomin"
android:text="-"/>
</RelativeLayout>
···省略代碼
</RelativeLayout>
可以看到這里是兩個按鈕組成的一個縮放控件呀酸，那么他們的監(jiān)聽器實現(xiàn)如下
private void MyZoomControl() {
zoomInBtn = (Button) findViewById(R.id.zoomin);
zoomOutBtn = (Button) findViewById(R.id.zoomout);
zoomInBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float zoomLevel = baidumap.getMapStatus().zoom;
if(zoomLevel<=18){
baidumap.animateMapStatus(MapStatusUpdateFactory.zoomIn());
zoomOutBtn.setEnabled(true);
}else{
Toast.makeText(MainActivity.this, "已經(jīng)放至最大凉蜂！", Toast.LENGTH_SHORT).show();
zoomInBtn.setEnabled(false);
}
}
});
zoomOutBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float zoomLevel = baidumap.getMapStatus().zoom;
if(zoomLevel>4){
baidumap.animateMapStatus(MapStatusUpdateFactory.zoomOut());
zoomInBtn.setEnabled(true);
}else{
zoomOutBtn.setEnabled(false);
Toast.makeText(MainActivity.this, "已經(jīng)縮至最小！", Toast.LENGTH_SHORT).show();
}
}
});
}
控制縮放的代碼大家也見到過窿吩，在第二篇文章茎杂，這里的代碼和 那里的沒什么兩樣，主要是增加了一些button的UI控制纫雁，禁止點擊啊之類的煌往。
好，那我們的界面最終成了什么樣子呢轧邪？
可以說携冤，不比百度地圖差吧。
總結
那么這篇文章到這里也就算結束了吧闲勺，這篇文章講的東西比較少，主要是在界面上做一些優(yōu)化扣猫，那么下一篇文章我們會討論點啥呢菜循？
期待嗎？
參考
hyman csdn博客
hyman mooc視頻
簡書：zhh_happig
baidumapdemo
