微信小程序—map地图实现标记多个位置

前言：

在这里给大家介绍一个地标搜索网站（可精准获取经纬度）：  http://so.earthol.com/    

小程序官方地图 map 文档参考

小程序官方地图 map 相关 API （地图组件控制）参考

问题解决：

这里利用我母校：西北农林科技大学 做实验地。对垃圾桶进行标记。这里为了减少代码的冗余，只选了几个位置。

效果图+项目结构如下：

源码下载：https://download.csdn.net/download/weixin_43042683/12461689

这是我上传csdn的源码，有csdn的VIP的可以下载，直接导入就可以用，如果没有就不要破费了哈，下面给了代码，自己复制粘贴吧

关键代码

index.js代码：

Page({
  data: {
    longitude: 108.07332649827005,  //默认定位经度
    latitude: 34.28626496061992,   //默认定位纬度
    markers: [
    //八教垃圾桶位置
    {
      id: 0,
      iconPath: "../image/1.jpg",
        latitude: 34.28594472914285,
        longitude: 108.07340294122699,
      width: 20,  //图片显示宽度
      height: 20  //图片显示高度
    },
      //三教垃圾桶位置
      {
        id: 1,
        iconPath: "../image/1.jpg",
        latitude: 34.28345098172088,
        longitude: 108.07423643767835,
        width: 20,
        height: 20
      },
    //北秀垃圾桶位置
      {
        id: 1,
        iconPath: "../image/1.jpg",
        latitude: 34.28520896777005,
        longitude: 108.0694815516472,
        width: 20,
        height: 20
      },
    //信工楼垃圾桶位置
    {
      id: 2,
      iconPath: "../image/1.jpg",
      latitude: 34.2842427171466,
      longitude: 108.0724158883095,
      width: 20,
      height: 20
    },
    //10号寝室楼的位置
      {
        id: 1,
        iconPath: "../image/1.jpg",
        latitude: 34.286067170734036,
        longitude: 108.0664473026991,
        width: 20,
        height: 20
      },
    //14号寝室楼的位置 
       {
        id: 1,
        iconPath: "../image/1.jpg",
        latitude: 34.287375788724745,
         longitude: 108.06752823293209,
        width: 20,
        height: 20
      },
      //理学院垃圾桶位置
      {
        id: 1,
        iconPath: "../image/1.jpg",
        latitude: 34.28801845563627,
        longitude: 108.07408086955549,
        width: 20,
        height: 20
      },
      //食品院垃圾桶位置
      {
        id: 1,
        iconPath: "../image/1.jpg",
        latitude: 34.288367488192435,
        longitude: 108.07558692991735,
        width: 20,
        height: 20
      },
    //动科楼垃圾桶位置
       {
        id: 1,
        iconPath: "../image/1.jpg",
         latitude: 34.28487044889044,
         longitude: 108.07326279580593,
        width: 20,
        height: 20
      }]
  },

  onLoad: function () {
    var that = this;
    wx.getLocation({
      type: "wgs84",
      success: function (res) {
        var latitude = res.latitude;
        var longitude = res.longitude;
        //console.log(res.latitude);
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: [{
            latitude: res.latitude,
            longitude: res.longitude
          }]
        })
      }
    })
  },
  onReady: function () {

  }
})

index.wxml代码

  
  {{longitude}}

index.json代码：

{
  "usingComponents": {}
}

index.wxss代码：

page{
  height: 100%;
}

图片为：

送大家一个 表情包，哈哈（纯属搞笑）