このプロジェクトでは、BaiduマップのWebバージョンをオフラインで開発する必要があります。ここにあなた自身の開発プロセスと経験の要約があります。
おおよその要件は次のとおりです。各車には会社のレシーバーが装備されており、車両の座標、速度、ステアリング、その他の情報にリアルタイムでフィードバックされ、各車両の情報を受け取った後、車両の場所はバイドゥマップにリアルタイムで描画されます。作業ポイントには必ずしもネットワークがあるわけではないため、オフライン開発が必要です。
このプロセスには、3つの主要な技術的ポイントがあります。
1.オフラインAPIを取得する方法
2。オフラインのタイル図を取得する方法
3.オフラインのときにWGS座標をBaiduマップ座標に変換する方法
問題解決プロセス：
1. Baiduマップはオフラインマップをサポートしていないため、オンラインコードをオフラインコードに変更する方法を見つける必要があります。
ここで参照できます：http：//my.oschina.net/smzd/blog/548538
ここにコピーをまとめました。また、デモの例に従ってオフラインデモも書きました。もちろん、オフラインはオンラインほど完璧ではありませんが、結局のところ、一部の機能はまだ使用できません。 （このバージョンはBaidu Maps API v2.0に基づいています）
使い方：
1. .png、.jpgなど、使用するタイルの画像接尾辞を決定します。 baidumap_offline_vv2_load.jsのimgextを変更します
var bdmapcfg = { 'imgext':'.jpg', //The suffix of the tile picture-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2。使用するタイルのディレクトリを決定します。デフォルトでは、baidumap_v2/ tiles/ directoryにあり、別のアドレスに変更することもできます。 baidumap_offline_vv2_load.jsでtiles_dirを変更します
3。コードを書き込むためにデモを参照してください。キーポイントは次のとおりです。
1）ロードファイルをロードするだけです
<script type = "text/javascript" src = "baidumapv2/baidumap_offline_v2_load.js"> </script>
2）CSSファイルをロードする（必要ではないと思われる）
<link rel = "styleSheet" type = "text/css" href = "../../ baiduumapv2/css/baidu_map_v2.css"/>
3）マップを配置するためのコンテナを定義し、CSSを使用して高さと幅を制御します
<div id = "map_demo"> </div>
4）JSコードを書きます
<script type = "text/javascript"> // baidu map api function var map = new bmap.map（ "map_demo"）; // Map Instance Map.Centerandzoom（新しいbmap.point（116.404、39.915）、8）を作成します。 //マップを初期化し、中心点座標とマップレベルを設定します//map.addcontrol(new bmap.maptypecontrol（））; //マップタイプコントロールを追加して電子マップのみをオフラインでサポートすると、Satellite/3Dは//map.setCurrentCity(Beijing "）をサポートしません。 //マップによって表示されるオフラインマップの設定はサポートしません！ ！ map.enablescrollwheelzoom（true）; //マウスホイールを開き、map.addcontrol（new bmap.navigationcontrol（））; //スケーリングボタン</script>
2。タイル図を取得します
ここで参照できます：http：//my.oschina.net/smzd/blog/619397
もちろん、以下などのオンラインでダウンロードツールもあります。
3. Baidu Mapが安全のために特別な治療を行ったため、受信機が受信した座標（WGS）をBaiduマップに直接配置することは偏見があります。そのWeb Service APIは座標変換APIを提供しますが、HTTPで提供される座標変換インターフェイスであるため、ネットワークから分離することはできません。ここでは、いくつかの専門知識を使用して、WGS座標をGCJに変換し、GCJ座標をBD Baidu座標に変換します。検証の精度はほぼ正確です。
パブリッククラスCoorConvertutil {// pi static double pi = 3.14159265358979324; //平面座標系への衛星楕円体座標投影の投影係数static double a = 6378245.0; //楕円体の静的二重EE = 0.00669342162296594323; // PI変換量public final final static double x_pi = 3.14159265358979324 * 3000.0 /180.0; public static double [] wgs2bd（double lat、double lon）{double [] wgs2gcj = wgs2gcj（lat、lon）; double [] gcj2bd = gcj2bd（wgs2gcj [0]、wgs2gcj [1]）; gcj2bdを返します。 } / ** * gcj座標への座標 * @param lat * @param lon * @return * / public static double [] gcj2bd（double lat、double lon）{double x = lon、y = lat; double z = math.sqrt（x * x + y * y） + 0.00002 * math.sin（y * x_pi）; double theta = math.atan2（y、x） + 0.000003 * math.cos（x * x_pi）; double bd_lon = z * math.cos（theta） + 0.0065; double bd_lat = z * math.sin（theta） + 0.006; new double [] {bd_lat、bd_lon}を返します。 } public static double [] bd2gcj（double lat、double lon）{double x = lon -0.0065、y = lat -0.006; double z = math.sqrt（x * x + y * y）-0.00002 * math.sin（y * x_pi）; double theta = math.atan2（y、x）-0.000003 * math.cos（x * x_pi）; double gg_lon = z * math.cos（theta）; double gg_lat = z * math.sin（theta）;新しいdouble [] {gg_lat、gg_lon}を返します。 } / ** * wgs gcj座標への座標 * @param lat * @param lon * @return * / public static double [] wgs2gcj（double lat、double lon）{double dlat = transformlat（lon -105.0、lat -35.0）; double dlon = transformlon（lon -105.0、lat -35.0）; double radlat = lat / 180.0 * pi; double magic = math.sin（radlat）;魔法= 1 -ee *魔法 *魔法。 double sqrtmagic = math.sqrt（magic）; dlat =（dlat * 180.0） /（（a *（1 -ee）） /（magic * sqrtmagic） * pi）; dlon =（dlon * 180.0） /（a / sqrtmagic * math.cos（radlat） * pi）; double mglat = lat + dlat; double mglon = lon + dlon; double [] loc = {mglat、mglon}; return loc; } private static double transformlat（double lat、double lon）{double ret = -100.0 + 2.0 * lat + 3.0 * lon + 0.2 * lon + 0.1 * lat * lon + 0.2 * math.sqrt（lat））; ret + =（20.0 * math.sin（6.0 * lat * pi） + 20.0 * math.sin（2.0 * lat * pi）） * 2.0 / 3.0; ret + =（20.0 * math.sin（lon * pi） + 40.0 * math.sin（lon / 3.0 * pi）） * 2.0 / 3.0; ret + =（160.0 * math.sin（lon / 12.0 * pi） + 320 * math.sin（lon * pi / 30.0）） * 2.0 / 3.0; Retを返します。 } private static double transformlon（double lat、double lon）{double ret = 300.0 + lat + 2.0 * lon + 0.1 * lat + 0.1 * lon + 0.1 * math.sqrt（math.abs（lat））; ret + =（20.0 * math.sin（6.0 * lat * pi） + 20.0 * math.sin（2.0 * lat * pi）） * 2.0 / 3.0; ret + =（20.0 * math.sin（lat * pi） + 40.0 * math.sin（lat / 3.0 * pi）） * 2.0 / 3.0; ret + =（150.0 * math.sin（lat / 12.0 * pi） + 300.0 * math.sin（lat / 30.0 * pi）） * 2.0 / 3.0; Retを返します。 } / ** *学位区分とローテーション * @param lat latitude ddmm.mmmm * @param lon lon dddmm.mmmm * @return * / public static double [] dufen2du（string lat、string lon）{double latd = double.parsedouble（lat.substring（0、2））; double latm = double.parsedouble（lat.substring（2））; double latnew = latd+latm/60; double lond = double.parsedouble（lon.substring（0、3））; double lonm = double.parsedouble（lon.substring（3））; double lonnew = lond+lonm/60;新しいdouble [] {latnew、lonnew}を返します。 }}最後に、プロジェクト効果のスクリーンショットをご覧ください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。