【小程序】地图｜绘制GPX轨迹

根据导出的GPX文件，在地图上绘制其路径轨迹。

GPX: the GPS Exchange Format

GPX (GPS交换格式)是一种轻量级XML数据格式，用于在互联网上的应用程序和Web服务之间交换GPS数据(路径、路由和跟踪)。

在线XML转JSON - BeJSON

为了方便后续绑定使用，转换后批量将“lat”替换为“latitude”、“lon”替换为“longitude”。

将转换后的JSON文件部署到本地服务器，先进行本地测试。

通过 wx.request 获取数据： 微信小程序通过api接口将json数据展现到小程序示例

使用本地链接进行测试会报错，需要将项目设置里勾选上“不校验...”： 【微信小程序】 微信小程序连接本地接口

本地测试没问题后，将文件部署到外网环境，改下url就可以了。

由于数据格式已经与小程序要求的一致了，直接将其赋给对应的Key即可。

需要注意的是，在 wx.request 回调里直接使用 this.setData 会报错： 微信小程序中this指向作用域问题this.setData is not a function报错 。

至此，已基本满足预研需求，后续开发具体功能时会方便不少啦 ~ O(∩_∩)O ~

如果能够显示 卫星地图 就完美了，不过还没找到好的解决方案，留作另一个问题吧，TX不开放也没办法了。

自google 06年进入中国，在地图、移动领域的发展速度基本上都是每年几倍的增长。在最新的Android平台开发相关应用程序，如果能深入了解google map 将会对我们Android开发提供很大的帮助.以下是我总结的在Android开发中对google map的理解。

1. 首先先要获取你的debug keystore位置：

打开Eclipse--->Windows--->preferences--->Android--->Build

查看默认的debug keystore位置，我的是C:\Documents and Settings\sdhbk\.android\debug.keystore

2.

D:\android-sdk-windows-1.5_r1\tools>keytool -list -alias androiddebugkey -keysto

re "C:\Documents and Settings\sdhbk\.android\debug.keystore" -storepass android

-keypass android

androiddebugkey, 2009-7-25, PrivateKeyEntry,

认证指纹 (MD5)： DA:D5:6E:C2:80:D1:0F:0D:F8:2A:58:6A:74:7C:CE:2D

3.

　 打开

填入你的认证指纹(MD5)即可获得apiKey了,结果显示如下：

感谢您注册 Android 地图 API 密钥！

您的密钥是：

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

4.　 使用得到的apiKey:

在layout中加入MapView

<com.google.android.maps.MapView

android:id="@+id/mapview"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:apiKey="0jOkQ80oD1JL9C6HAja99uGXCRiS2CGjKO_bc_g" />

或者

<view android:id="@+id/mv"

　 class="com.google.android.maps.MapView"

　 android:layout_width="fill_parent"

　 android:layout_height="fill_parent"

　 android:layout_weight="1"

　 android:apiKey="0jOkQ80oD1JL9C6HAja99uGXCRiS2CGjKO_bc_g"

　 />

5.Android在sdk1.5的预装的add-on中提供了一个Map扩展库com.google.android.maps，利用它你就可以给你的android应用程序增加上强大的地图功能了。这个库的位置在Your-SDK_DIR\add-ons\google_apis-3\libs.

一定要在manifest.xml中设置全相应的权限，比如：

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.INTERNET" />

要在manifest.xml中加上要用的maps库：

<manifest xmlns:android=""

package="com.example.package.name">

...

<application android:name="MyApplication" >

　 <uses-library android:name="com.google.android.maps" />

　 ...

</application>

...

</manifest>

需要说明的是这个库不是标准的android sdk的内容，你也可以自己从这里这里下载并放到你的sdk里面。

Maps库分析

Maps库提供了十几个类，具体可以参考这里, 包括Mapview，MapController，MapActivity等。

Mapview是用来显示地图的view, 它也是派生自android.view.ViewGroup。

地图可以以不同的形式来显示出来，如街景模式，卫星模式等，具体方法可以参考：

setSatellite(boolean), setTraffic(boolean), and setStreetView(boolean)

MapView只能被MapActivity来创建，这是因为mapview需要通过后台的线程来连接网络或者文件系统，而这些线程要由mapActivity来管理。

需要特别说明的一点是，android 1.5中，map的zoom采用了built-in机制，可以通过setBuiltInZoomControls(boolean)来设置是否在地图上显示zoom控件。

MapActivity是一个抽象类，任何想要显示MapView的activity都需要派生自MapActivity。并且在其派生类的onCreate()中，都要创建一个MapView实例，可以通过MapView constructor (then add it to a layout View with ViewGroup.addView(View)) 或者通过layout XML来创建。

实例分析

最后，按照惯例，还是用一个小程序来演示一下android中地图功能的开发。主要功能是实现了地图的缩放，添加了菜单，从而可以手动选择地图的显示模式等。

Step 1: 新建一个android project, 注意这里要选择的build target为"Google APIs"

Step 2: 修改menifest文件：

<xml version="1.0" encoding="utf-8" >

<manifest xmlns:android=""

package="com.map.prac"

android:versionCode="1"

android:versionName="1.0">

　 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

　 <uses-permission android:name="android.permission.INTERNET" />

　 <application android:icon="@drawable/icon" android:label="@string/app_name">

　 <uses-library android:name="com.google.android.maps" />

　 <activity android:name=".MapViewPrac2"

android:label="@string/app_name">

　 <intent-filter>

　 <action android:name="android.intent.action.MAIN" />

　 <category android:name="android.intent.category.LAUNCHER" />

　 </intent-filter>

　 </activity>

　 </application>

　 <uses-sdk android:minSdkVersion="3" />

</manifest>

Step 3: 修改layout文件，main.xml

<xml version="1.0" encoding="utf-8" >

<LinearLayout xmlns:android=""

　 android:id="@+id/main"

　 android:layout_width="fill_parent"

　 android:layout_height="fill_parent">

　 <com.google.android.maps.MapView

　 android:id="@+id/map"

　 android:layout_width="fill_parent"

　 android:layout_height="fill_parent"

　 android:enabled="true"

　 android:clickable="true"

　 android:apiKey="　 "

　 />

</LinearLayout>

这里需要将api key中的改成你自己申请到的api key.

Step 4: 修改代码：

package com.map.prac

import com.google.android.maps.GeoPoint

import com.google.android.maps.MapActivity

import com.google.android.maps.MapController

import com.google.android.maps.MapView

import android.app.AlertDialog

import android.app.Dialog

import android.content.DialogInterface

import android.os.Bundle

import android.util.Log

import android.view.KeyEvent

import android.view.Menu

import android.view.MenuItem

public class MapViewPrac2 extends MapActivity {

　 private final String TAG = "MapPrac"

　 private MapView mapView = null

　 private MapController mc

　 //Menu items

　 final private int menuMode = Menu.FIRST

　 final private int menuExit = Menu.FIRST+1

　 final private int menuCommandList = Menu.FIRST + 2

　 private int chooseItem = 0

　 /** Called when the activity is first created. */

　 @Override

　 public void onCreate(Bundle savedInstanceState) {

　 super.onCreate(savedInstanceState)

　 setContentView(R.layout.main)

　 mapView = (MapView)findViewById(R.id.map)

　 mc = mapView.getController()

　 mapView.setTraffic(true)//

　 mapView.setSatellite(false)

　 mapView.setStreetView(true)

　 //GeoPoint gp = new GeoPoint((int)(39.269259 * 1000000), (int)(115.255762 * 1000000))//yixian

　 GeoPoint gp = new GeoPoint((int)(39.95 * 1000000), (int)(116.37 * 1000000))//beijing

　 //mc.animateTo(gp)

　 //mc.setZoom(12)

　 mc.setCenter(gp)

　 //to display zoom control in MapView

　 mapView.setBuiltInZoomControls(true)

　 }

　 @Override

　 public boolean onKeyDown(int keyCode, KeyEvent event) {

　 // TODO Auto-generated method stub

　 Log.i(TAG,"enter onKeyDown")

　 return super.onKeyDown(keyCode, event)

　 }

　 @Override

　 public boolean onCreateOptionsMenu(Menu menu) {

　 menu.add(0, menuMode, 0, "Map Mode")

　 menu.add(0, menuCommandList, 1, "Command List")

　 menu.add(0, menuExit, 2, "Exit")

　 return super.onCreateOptionsMenu(menu)

　 }

　 @Override

　 public boolean onMenuItemSelected(int featureId, MenuItem item) {

　 // TODO Auto-generated method stub

　 switch(item.getItemId())

　 {

　 case menuMode:

　 Dialog dMode = new AlertDialog.Builder(this)

　 //.setIcon(R.drawable.alert_dialog_icon)

　 .setTitle(R.string.alert_dialog_single_choice)

　 .setSingleChoiceItems(R.array.select_dialog_items2, chooseItem, new DialogInterface.OnClickListener() {

　 public void onClick(DialogInterface dialog, int whichButton) {

　 Log.i(TAG, "choose button is "+ whichButton)

　 chooseItem = whichButton

　 /* User clicked on a radio button do some stuff */

　 }

　 })

　 .setPositiveButton(R.string.alert_dialog_ok, new DialogInterface.OnClickListener() {

　 public void onClick(DialogInterface dialog, int whichButton) {

　 /* User clicked Yes so do some stuff */

　 Log.i(TAG,"item = "+chooseItem)

　 switch(chooseItem)

　 {

　 case 0:

　 mapView.setSatellite(false)

　 break

　 case 1:

　 mapView.setSatellite(true)

　 break

　 case 2:

　 mapView.setTraffic(true)

　 break

　 case 3:

　 mapView.setStreetView(true)

　 break

　 default:

　 break

　 }

　 }

　 })

　 .setNegativeButton(R.string.alert_dialog_cancel, new DialogInterface.OnClickListener() {

　 public void onClick(DialogInterface dialog, int whichButton) {

　 /* User clicked No so do some stuff */

　 }

　 })

　 .create()

　 dMode.show()

　 break

　 case menuCommandList:

　 //create the dialog

　 Dialog d = new AlertDialog.Builder(this)

　 .setTitle(R.string.select_dialog)

　 .setItems(R.array.select_dialog_items, new DialogInterface.OnClickListener() {

　 public void onClick(DialogInterface dialog, int which) {

　 /* User clicked so do some stuff */

　 String[] items = getResources().getStringArray(R.array.select_dialog_items)

　 /*new AlertDialog.Builder(this)

　 .setMessage("You selected: " + which + " , " + items[which])

　 .show()*/

　 Log.i(TAG,"you choose is: " + items[which])

　 }

　 })

　 .create()

　 //show the dialog

　 d.show()

　 break

　 case menuExit:

　 finish()

　 break

　 default:

　 break

　 }

　 return super.onMenuItemSelected(featureId, item)

　 }

　 @Override

　 protected boolean isRouteDisplayed() {

　 // TODO Auto-generated method stub

　 return false

　 }

}

关于google map的用法还有待各位Android开发人员在实际开发中的总结！

---