WeChat Mini Program Baidu Map

Steps for usage:

1. Register a Baidu map api account and get the application AK

2. Environment configuration: get WeChat applet appID key and Baidu AK

3. Create a local applet project

① Open the WeChat Mini Program Developer Tool and use WeChat to confirm login.

② Click the "+" button to add items.

③ Click the "Add Project" button to complete the project creation.

Note: You need to check "Create quick start project in the current directory".

4. Download the JavaScript API of Baidu Map WeChat Mini Program, unzip the bmap-xw.js file into the WeChat Mini Program directory libs file

5. Open the quickly created WeChat applet pages/index/index.js file and completely replace the original code with the following code

In the following code, first reference the JavaScript API module of Baidu Map WeChat applet, then declare the BMapWX object in the onLoad of the page, and finally call the BMapWX.search method for POI retrieval.

// 引用百度地图微信小程序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. To display the map and search results normally, please open the pages/index/index.wxml file and completely replace the original code with the following code

<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. Copy the style code to the pages/index/index.wxss file

.map_container{
   
    
    height: 300px; 
    width: 100%; 
} 

.map {
   
    
    height: 100%; 
    width: 100%; 
}

WeChat Mini Program Baidu Map

Guess you like