如果要把GoogleMap放進APP裡面要怎麼辦呢？
這邊教您如何把GoogleMap放進APP及如何控制Map的funtion。
顯示成果：
如圖，先把做好的地圖html檔放進您專案的assets資料夾裡。
MainActivity.java
public class MainActivity extends Activity {
String MAP_URL = ("file:///android_asset/goomap.html");->html的位置
WebView mWebView = null;
boolean webviewReady = false;
Button submit;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebViewClient(mWebViewClient);
WebSettings websettings = mWebView.getSettings();
websettings.setJavaScriptEnabled(true);
submit = (Button) findViewById(R.id.submit);
submit.setOnClickListener(new
Button.OnClickListener() {
@Override
public void onClick(View v) {
if (webviewReady) {
final String centerURL = "javascript:centerAt()";
if (webviewReady)
mWebView.loadUrl(centerURL);
}
}
});
setupWebView();// 設定webview
}
private void setupWebView() {
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
// Wait for the page to load then send the location information
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView
view, String url) {
webviewReady = true;// webview已經載入完畢
}
});
mWebView.loadUrl(MAP_URL);
}
WebViewClient mWebViewClient = new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView
view, String url) {
view.loadUrl(url);
return true;
}
};
}
Activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
tools:context="com.example.googlemaptest.MainActivity"
>
<Button
android:id="@+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/LatText"
android:layout_alignParentBottom="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="移至中心點" />
</RelativeLayout>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
</LinearLayout>
Goomap.html
<html>
<head>
<meta charset="utf-8">
<title>Weather layer</title>
<style>
html,
body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>
<script>
var map;
function
initialize() { ->初始
var
mapOptions = {
zoom: 12,
center:new
google.maps.LatLng(25.0339031,121.5645099)
};
map = new
google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var
weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
var
cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
function
centerAt(){ ->移至中心點
myLatlng = new
google.maps.LatLng(25.0339031,121.5645099);
map.panTo(myLatlng);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
如果您喜歡我的文章，請在文章最末按5下Like!
我將得到LikeCoin的回饋:)
回饋由LikeCoin基金會出資，您只要註冊/登入帳號(FB、Google帳號都可以註冊，流程超快)，按L五次左鍵，可以贊助我的文章且完全不會花到錢！
支持創作，正向交流:)
沒有留言:
張貼留言