前言

本文地址链接
微信小程序-百度地图SDK官方文档

微信小程序地图插件系列其他文章
微信小程序地图插件系列（一）：微信小程序使用高德地图

效果展示

地点
上面坐标图片路径需要自己更换。

一、准备阶段

• 1、在百度地图开发平台中注册成为开发者。
• 2、申请开发者密钥（AK），其中需要填写小程序appid。
• 3、下载并解压百度地图微信小程序SDK

二、快速上手

• 1、创建一个小程序
• 2、创建一个map文件夹，并创建page页面
• 3、打开map.js文件，用下面的代码完全替换原代码。

// 引用百度地图微信小程序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 
        }); 
    } 
})

• 4、打开pages/map/map.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> 

• 5、拷贝样式代码到 pages/index/index.wxss文件

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

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

• 6、点击保存，他会出现下属提示

getLocation需要在app.json中声明permission

• 7、找到app.json文件，在配置上添加如下代码即可。

 "permission": {
   
    "scope.userLocation":{
   
      "desc": 
    }
  },

这里请大家对应替换自己pages/map/map.js中的图片路径。以便于更直观的看到效果。

总结

上述只是一个初探，后续会在这里继续更新。公司项目还没搞定，就先入个门。想继续和我完成后续学习的同志们，请关注我。以便于我更新后能通知到您！！！