WeChatミニプログラムマップ例の詳細説明-ミニプログラム開発-php.cn

WeChatミニプログラムマップ例の詳細説明

高洛峰

リリース： 2017-02-15 12:46:00

オリジナル

3728 人が閲覧しました

図 WeChat ミニプログラムマップ (MAP) インスタンス

現在のアドレスを取得するために Xiaobian が WeChat ミニプログラムマップ (MAP API) 上で収集した情報を次に示します。

今日の地図位置モジュール。以下は実機のテスト結果です。

微信小程序地图（map）实例详解

経度と緯度は言うまでもありません。これは位置決めに使用されます。ただし、下の図では、スケールは現在無効です。後で修正する必要があります。パブリックベータ版は始まったばかりです。つまり、スケールをどのように変更しても、マップはすべてデフォルトのズーム率になります

微信小程序地图（map）实例详解

マーカーの回転角度はアイコンの回転角度です。画面と平行なアイコンが必要な場合は、それを 0 に設定します。

さらに、アイコンパスを iconPath に設定するだけで変更できます。前のコード: 微信小程序地图（map）实例详解

<!--index.wxml--> 
<button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> 
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>

ログイン後にコピー

2.wx.getLocation(OBJECT) 現在位置を取得するAPI

赤いボックスは経度、緯度、速度、精度を示しています

gch02 によって返される座標。

特定の API のドキュメントを参照してください

微信小程序地图（map）实例详解

3. wx.openLocation(OBJECT) 場所を確認します
最も簡単で大雑把な方法は、経度と緯度。微信小程序地图（map）实例详解
コード:

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  var markers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   name: &#39;浦东新区&#39;, 
   desc: &#39;我的位置&#39; 
  }] 
  var covers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   iconPath: &#39;../images/car.png&#39;, 
   rotate: 0 
  }] 
  this.setData({ 
   longitude: 121.47, 
   latitude: 31.23, 
   markers: markers, 
   covers: covers, 
  }) 
 } 
})

ログイン後にコピー

実機テストレンダリング:

読んでいただきありがとうございます、皆さんのお役に立てれば幸いです、このサイトのサポートに感謝します!

WeChat アプレットマップの例と関連記事の詳細な説明については、PHP 中国語 Web サイトに注目してください。