微信小程序之绘制多个marker以及调用手机地图软件导航

此文章是为了说明使用微信小程序在腾讯地图上绘制多个marker地图点；然后点击某一个marker进行导航的信息；具体的功能演示如下：

一、功能演示

二、前端布局代码

//地图的布局文件信息

  

//以下是点击地图marker之后，下方显示的内容信息

  

    

      

        

          

            企业名称搜索

          

        

      

    

  
 

  

    

      

        

        显示全部

     

    

  

 

  

    

      {{choiceModel.name}}

      

         联系电话：

        15249243002

      

      

         企业地址：

        {{choiceModel.addr}}

      

    

    

      

    

  

三、js逻辑处理代码

1：marker点击

首先是通过方法bindmarkertap监听用户的点击事件，具体方法如下；

 bindmarkertap(event) {

    var that = this;

    var index = event.detail

    console.log("log_-----queryBean-----", index.markerId)

    for (var i = 0; i < this.data.companyAddress.length; i++) {

      if (i == index.markerId) {

        that.data.posIndex = i;

        that.data.markers[i].callout.borderColor = "#FF0000";

        that.data.markers[i].callout.color = "#FF0000";

      } else {

        that.data.markers[i].callout.borderColor = "#c3c3c3";

        that.data.markers[i].callout.color = "#333333";

      }

    }

    that.setData({

      choiceModel: this.data.companyAddress[that.data.posIndex],

      markers: that.data.markers

    })

  },

说明一：

因为是存在多个数据，所在在用户点击的时候需要循环一下数据，然后通过点击的markerid和数据的makerid进行判断，然后对点击的marker 修改它的外边框的颜色；也就是代码：

 that.data.markers[i].callout.borderColor = "#FF0000";

 that.data.markers[i].callout.color = "#FF0000";

说明二：

    that.setData({

      choiceModel: this.data.companyAddress[that.data.posIndex],

      markers: that.data.markers

    })

这块的代码是为了获取用户点击的数组的指定值；这里的值需要给前端的界面进行显示

2：按钮导航

1：点击按钮

      

    

2：js导航代码

  naviListener: function (e) {

    wx.openLocation({

      latitude: parseFloat(this.data.choiceModel.latitude), //维度

      longitude: parseFloat(this.data.choiceModel.longitude), //经度

      name: this.data.choiceModel.name, //目的地定位名称

      scale: 15,  //缩放比例

      address: this.data.choiceModel.addr //导航详细地址

    })

  },

说明：这块的代码是小程序官方提供的代码；直接使用就可以了