WeChatミニプログラム百度地図

使用手順：

1. BaiduマップAPIアカウントを登録し、アプリケーションAKを取得します

2.環境構成：WeChatアプレットのappIDキーとBaiduAKを取得します

3.ローカルアプレットプロジェクトを作成します

①WeChatミニプログラム開発者ツールを開き、WeChatを使用してログインを確認します。

②「+」ボタンをクリックしてアイテムを追加します。

③「プロジェクト追加」ボタンをクリックして、プロジェクトの作成を完了します。

注：「現在のディレクトリにクイックスタートプロジェクトを作成する」をチェックする必要があります。

4. Baidu MapWeChatアプレットのJavaScriptAPIをダウンロードし、bmap-xw.jsファイルをWeChatアプレットディレクトリのlibsファイルに解凍します。

5.すばやく作成したWeChatアプレットpages / index / index.jsファイルを開き、元のコードを次のコードに完全に置き換えます。

次のコードでは、最初にBaidu MapWeChatアプレットのJavaScriptAPIモジュールを参照し、次にページのonLoadでBMapWXオブジェクトを宣言し、最後にBMapWX.searchメソッドを呼び出してPOIを取得します。

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js'); 
var wxMarkerData = []; 
Page({ 
    data: { 
        markers: [], 
        latitude: '', 
        longitude: '', 
        placeData: {} 
    }, 
    makertap: function(e) { 
        var that = this; 
        var id = e.markerId; 
        that.showSearchInfo(wxMarkerData, id); 
        that.changeMarkerColor(wxMarkerData, id); 
    }, 
    onLoad: function() { 
        var that = this; 
        // 新建百度地图对象 
        var BMap = new bmap.BMapWX({ 
            ak: '您的ak' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            }); 
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            }); 
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            }); 
        } 
       // 发起POI检索请求 
        BMap.search({ 
            "query": '酒店', 
            fail: fail, 
            success: success, 
            // 此处需要在相应路径放置图片文件 
            iconPath: '../../img/marker_red.png', 
            // 此处需要在相应路径放置图片文件 
            iconTapPath: '../../img/marker_red.png' 
        }); 
    }, 
    showSearchInfo: function(data, i) { 
        var that = this; 
        that.setData({ 
            placeData: { 
                title: '名称：' + data[i].title + '\n', 
                address: '地址：' + data[i].address + '\n', 
                telephone: '电话：' + data[i].telephone 
            } 
        }); 
    }, 
    changeMarkerColor: function(data, i) { 
        var that = this; 
        var markers = []; 
        for (var j = 0; j < data.length; j++) { 
            if (j == i) { 
                // 此处需要在相应路径放置图片文件 
                data[j].iconPath = "../../img/marker_yellow.png"; 
            } else { 
                // 此处需要在相应路径放置图片文件 
                data[j].iconPath = "../../img/marker_red.png"; 
            } 
            markers[j](data[j]); 
        } 
        that.setData({ 
            markers: markers 
        }); 
    } 
})

6.マップと検索結果を正常に表示するには、pages / index / index.wxmlファイルを開き、元のコードを次のコードに完全に置き換えてください。

<view class="map_container"> 
  <map class="map" id="map" longitude="{
   
   {longitude}}" latitude="{
   
   {latitude}}" scale="14" show-location="true" markers="{
   
   {markers}}" bindmarkertap="makertap"></map> 
</view> 
<view class="place_info"> 
  <text>{
   
   {placeData.title}}</text> 
  <text>{
   
   {placeData.address}}</text> 
  <text>{
   
   {placeData.telephone}}</text> 
</view>

7.スタイルコードをpages / index /index.wxssファイルにコピーします

。map_container {
   
    
    高さ：300px ;  
    幅：100 ％; } 。マップ{
    
    高さ：100 ％;  
    幅：100 ％; }

WeChatミニプログラム百度地図

おすすめ