小程序地图绘制多边形，设置透明度，添加文字标签，计算多边形内坐标个数，计算两点间的距离

先来份效果图，我的页面现在是静态的，地图功能基本实现，接下来就是添加动态接口的事情，添加完后再上传分截图大家看看吧

官网：https://developers.weixin.qq.com/miniprogram/dev/component/map.html
如果说需要更加详细的设置地图，比如样式，绘制圆圈，添加标记等，请仔细阅读微信的开发文档

在app.json里添加微信定位权限

"permission": {
    "scope.userLocation": {
      "desc": "获取定位信息可否？"
    }
  },

map.wxml

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" polygons="{{polygons}}" bindregionchange="regionchange"
     show-location style="width: 100%; height: 100vh;">
</map>

控制台输出结果

map.js

var util = require('../../utils/util.js')
var formatLocation = util.formatLocation
var IsPtInPoly = util.IsPtInPoly
var getDistance = util.getDistance


const app = getApp()

Page({
  data: {
    longitude: "117.265348",
    latitude: "38.907694",
     
    markers: [{
      iconPath:app.globalData.api+"/xcx/img/tourist_marker.png",//标记点，自定义图标
      id: 0,
      latitude: 38.907694,
      longitude: 117.265348,
      width: 20,
      height: 19,
      label:{
        content:'我的位置',//文字标签样式等设置
        color:'#000',
        fontSize:10,
        anchorX:-25,
        anchorY:-40,
        borderWidth:1,
        borderColor:'#ff3000',
        bgColor:'#ffffff',
        padding:2
      }
    }],
    polygons: [{
      points: [{
        longitude: 117.265348,
        latitude: 38.907694
      }, {
        longitude: 112.610832,
        latitude: 37.82133
      }, {
        longitude: 113.125956,
        latitude: 35.944515
      },
        {
          longitude: 115.425619,
          latitude: 34.966053
        },
        {
          longitude: 117.062978,
          latitude: 36.585177
        }],
      fillColor: "#b0210090",//前六位数字表示多边形背景颜色，后两位表示透明度，90是不透明多90%，反过来透明度10%
      strokeColor: "#FFF",
      strokeWidth: 2,
     
      zIndex: 1
    }, {
        points: [{
          longitude: 111.818599,
          latitude: 34.707698
        }, {
          longitude: 108.985415,
          latitude: 34.441382
        },
          {
            longitude: 107.771193,
            latitude: 33.120195
          },
          {
            longitude: 110.78835,
            latitude: 32.778928
          }],
        fillColor: "#6cff0090",
        strokeColor: "#FFF",
        strokeWidth: 2,
        zIndex: 1
      }]
  }, onLoad: function (options) {
    
    if(!wx.getStorageSync('token')){
      wx.showToast({
        title: '请登录账号',
        icon:'none',
        });
      
        wx.navigateTo({
          url: '/pages/land/land',
        })
      
    }else{
      getlocation();
     // wx.createMapContext("map", this.data);
    }
  },
})
//微信获取当前用户的定位
 function getlocation(){
  wx.getLocation({
    success: function (res) {
      console.log(res)
      console.log(formatLocation(res.longitude, res.latitude))
    },fail:function(res){
      console.log(res)
    }
 })
}
//判断某个点是否在多边形里面
var t=IsPtInPoly( 38.907694,117.265348, [{
  longitude: 117.265348,
  latitude: 38.907694
}, {
  longitude: 112.610832,
  latitude: 37.82133
}, {
  longitude: 113.125956,
  latitude: 35.944515
},
  {
    longitude: 115.425619,
    latitude: 34.966053
  },
  {
    longitude: 117.062978,
    latitude: 36.585177
  }])
  console.log(t)


  t=IsPtInPoly( 34.707698,111.818590, [{
    longitude: 111.818599,
    latitude: 34.707698
  }, {
    longitude: 108.985415,
    latitude: 34.441382
  },
    {
      longitude: 107.771193,
      latitude: 33.120195
    },
    {
      longitude: 110.78835,
      latitude: 32.778928
    }])
    console.log(t)
//两点距离
    var d=getDistance(33.120195,107.771193,32.778928,110.78835);
    console.log(d)

工具js util.js

 

function formatLocation(longitude, latitude) {
  if (typeof longitude === 'string' && typeof latitude === 'string') {
    longitude = parseFloat(longitude)
    latitude = parseFloat(latitude)
  }

  longitude = longitude.toFixed(2)
  latitude = latitude.toFixed(2)

  return {
    longitude: longitude.toString().split('.'),
    latitude: latitude.toString().split('.')
  }
}


function IsPtInPoly(aLat, aLon, pointList) {
  /* 
  :param aLon: double 经度 
  :param aLat: double 纬度 
  :param pointList: list [{latitude: 22.22, longitude: 113.113}...] 多边形点的顺序需根据顺时针或逆时针，不能乱 
  
  */
  var iSum = 0  
  var iCount = pointList.length
    
  if(iCount < 3) {
      return false 
  }
  for(var i = 0; i < iCount;i++) {
      var pLat1 = pointList[i].latitude  
      var pLon1 = pointList[i].longitude
      if(i == iCount - 1) {
          var pLat2 = pointList[0].latitude
          var pLon2 = pointList[0].longitude
      } else {
          var pLat2 = pointList[i + 1].latitude  
          var pLon2 = pointList[i + 1].longitude
      }
      if (((aLat >= pLat1) && (aLat < pLat2)) || ((aLat>=pLat2) && (aLat < pLat1))) {
          if (Math.abs(pLat1 - pLat2) > 0) {
              var pLon = pLon1 - ((pLon1 - pLon2) * (pLat1 - aLat)) / (pLat1 - pLat2);  
              if(pLon < aLon) {
                  iSum += 1 
              }
          }
      } 
  }
  if(iSum % 2 != 0) {
      return true  
  }else {
      return false 
  }  
}

/*计算两点距离*/
function getDistance(lat1, lng1, lat2, lng2) {
  lat1 = lat1 || 0;
  lng1 = lng1 || 0;
  lat2 = lat2 || 0;
  lng2 = lng2 || 0;

  var rad1 = lat1 * Math.PI / 180.0;
  var rad2 = lat2 * Math.PI / 180.0;
  var a = rad1 - rad2;
  var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
  var r = 6378137;
  var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));
  
  return distance;
}

module.exports = {
  IsPtInPoly: IsPtInPoly,
  formatLocation: formatLocation,
  getDistance:getDistance
}

接下来看看已经完成的页面，已经加了接口的