微信小程序城市范围画线

微信小程序城市范围画线

微信小程序城市范围画线

  • 用的微信小程序原生的map组件多边形polygons 将传入的经纬度连接起来
  • 参数:
  • points:经纬度数组 array [{latitude: 0, longitude: 0}] 城市边框经纬度
  • strokeWidth:描边的宽度 number
  • strokeColor:描边的颜色 string 十六进制
  • fillColor:填充颜色 string 十六进制 十六进制透明度对照表
  • zIndex:设置多边形Z轴数值 number
<map  polygons="{{polygon}}" longitude="{{longitude}}" latitude="{{latitude}}"'></map>```

```javascript
polygon:[{  //此处为北京区属周边数组 其他城市或精确到区级请去“http://datav.aliyun.com/tools/atlas/#&lat=33.578014746143985&lng=104.150390625&zoom=3”获取JSON文件
            points: [
                {longitude:116.6212, latitude:41.0283},
                {longitude:116.6157, latitude:41.053},
                {longitude:116.6309, latitude:41.0608},
                {longitude:116.6896, latitude:41.0445},
                {longitude:116.6988, latitude:41.0208},
                {longitude:116.6777, latitude:40.9715},
                {longitude:116.7224, latitude:40.9273},
                {longitude:116.7134, latitude:40.9103},
                {longitude:116.7796, latitude:40.8771},
                {longitude:116.8047, latitude:40.8409},
                {longitude:116.8207, latitude:40.8483},
                {longitude:116.8762, latitude:40.8212},
                {longitude:116.8925, latitude:40.7803},
                {longitude:116.9251, latitude:40.7729},
                {longitude:116.9266, latitude:40.7449},
                {longitude:116.9696, latitude:40.7064},
                {longitude:117.0311, latitude:40.6921},
                {longitude:117.1107, latitude:40.7082},
                {longitude:117.2071, latitude:40.695},
                {longitude:117.3179, latitude:40.6578},
                {longitude:117.4092, latitude:40.6873},
                {longitude:117.5143, latitude:40.6611},
                {longitude:117.5004, latitude:40.6362},
                {longitude:117.462, latitude:40.6531},
                {longitude:117.4489, latitude:40.6515},
                {longitude:117.4482, latitude:40.6278},
                {longitude:117.4212, latitude:40.6354},
                {longitude:117.4218, latitude:40.5694},
                {longitude:117.3877, latitude:40.5608},
                {longitude:117.3502, latitude:40.5822},
                {longitude:117.3118, latitude:40.578},
                {longitude:117.2495, latitude:40.5482},
                {longitude:117.2629, latitude:40.513},
                {longitude:117.2187, latitude:40.5143},
                {longitude:117.2085, latitude:40.5009},
                {longitude:117.2354, latitude:40.4575},
                {longitude:117.2641, latitude:40.4415},
                {longitude:117.2341, latitude:40.4172},
                {longitude:117.2407, latitude:40.3944},
                {longitude:117.2243, latitude:40.3709},
                {longitude:117.2428, latitude:40.3698},
                {longitude:117.2749, latitude:40.3326},
                {longitude:117.2955, latitude:40.2782},
                {longitude:117.3317, latitude:40.2897},
                {longitude:117.3455, latitude:40.2349},
                {longitude:117.39, latitude:40.228},
                {longitude:117.3784, latitude:40.2103},
                {longitude:117.3933, latitude:40.2036},
                {longitude:117.3805, latitude:40.1963},
                {longitude:117.4069, latitude:40.1858},
                {longitude:117.3517, latitude:40.1732},
                {longitude:117.3606, latitude:40.157},
                {longitude:117.3473, latitude:40.1356},
                {longitude:117.3117, latitude:40.1394},
                {longitude:117.2744, latitude:40.1058},
                {longitude:117.2493, latitude:40.1165},
                {longitude:117.2112, latitude:40.0966},
                {longitude:117.1992, latitude:40.0673},
                {longitude:117.1855, latitude:40.085},
                {longitude:117.1803, latitude:40.0695},
                {longitude:117.1564, latitude:40.0787},
                {longitude:117.1392, latitude:40.0641},
                {longitude:117.0856, latitude:40.0751},
                {longitude:117.0218, latitude:40.0296},
                {longitude:116.9304, latitude:40.0553},
                {longitude:116.8707, latitude:40.0411},
                {longitude:116.8502, latitude:40.055},
                {longitude:116.8227, latitude:40.0465},
                {longitude:116.82, latitude:40.0283},
                {longitude:116.7778, latitude:40.0324},
                {longitude:116.7572, latitude:39.9633},
                {longitude:116.7826, latitude:39.9476},
                {longitude:116.7871, latitude:39.8868},
                {longitude:116.8041, latitude:39.8779},
                {longitude:116.8123, latitude:39.8897},
                {longitude:116.9002, latitude:39.8316},
                {longitude:116.9028, latitude:39.8483},
                {longitude:116.9174, latitude:39.8469},
                {longitude:116.9363, latitude:39.7951},
                {longitude:116.9536, latitude:39.7876},
                {longitude:116.8995, latitude:39.7587},
                {longitude:116.9167, latitude:39.7314},
                {longitude:116.8828, latitude:39.7186},
                {longitude:116.9065, latitude:39.6776},
                {longitude:116.8499, latitude:39.6676},
                {longitude:116.8512, latitude:39.6523},
                {longitude:116.8269, latitude:39.6382},
                {longitude:116.8354, latitude:39.617},
                {longitude:116.79, latitude:39.6105},
                {longitude:116.7851, latitude:39.5935},
                {longitude:116.7254, latitude:39.6242},
                {longitude:116.7006, latitude:39.621},
                {longitude:116.7263, latitude:39.5978},
                {longitude:116.7106, latitude:39.588},
                {longitude:116.694, latitude:39.6017},
                {longitude:116.6205, latitude:39.6017},
                {longitude:116.6079, latitude:39.6247},
                {longitude:116.5659, latitude:39.6198},
                {longitude:116.5623, latitude:39.6017},
                {longitude:116.5244, latitude:39.5965},
                {longitude:116.5274, latitude:39.5732},
                {longitude:116.5085, latitude:39.5511},
                {longitude:116.4709, latitude:39.5546},
                {longitude:116.4772, latitude:39.5344},
                {longitude:116.4368, latitude:39.5264},
                {longitude:116.4438, latitude:39.5099},
                {longitude:116.4017, latitude:39.528},
                {longitude:116.4229, latitude:39.4966},
                {longitude:116.4125, latitude:39.4817},
                {longitude:116.4441, latitude:39.4822},
                {longitude:116.4561, latitude:39.4589},
                {longitude:116.4344, latitude:39.4428},
                {longitude:116.3367, latitude:39.4561},
                {longitude:116.3056, latitude:39.4895},
                {longitude:116.2579, latitude:39.5005},
                {longitude:116.2462, latitude:39.5572},
                {longitude:116.204, latitude:39.5888},
                {longitude:116.1541, latitude:39.586},
                {longitude:116.1304, latitude:39.5677},
                {longitude:116.1014, latitude:39.5801},
                {longitude:116.0353, latitude:39.5718},
                {longitude:116.0164, latitude:39.5881},
                {longitude:115.9952, latitude:39.5771},
                {longitude:115.9784, latitude:39.5957},
                {longitude:115.9793, latitude:39.5724},
                {longitude:115.9575, latitude:39.5609},
                {longitude:115.9102, latitude:39.6008},
                {longitude:115.9117, latitude:39.5695},
                {longitude:115.8904, latitude:39.5686},
                {longitude:115.8877, latitude:39.5507},
                {longitude:115.8555, latitude:39.555},
                {longitude:115.8192, latitude:39.5308},
                {longitude:115.8287, latitude:39.507},
                {longitude:115.7521, latitude:39.5117},
                {longitude:115.7385, latitude:39.5463},
                {longitude:115.6921, latitude:39.5658},
                {longitude:115.6893, latitude:39.599},
                {longitude:115.6672, latitude:39.6156},
                {longitude:115.6573, latitude:39.6001},
                {longitude:115.5799, latitude:39.5895},
                {longitude:115.5452, latitude:39.6186},
                {longitude:115.5145, latitude:39.5918},
                {longitude:115.5224, latitude:39.64},
                {longitude:115.4782, latitude:39.6523},
                {longitude:115.5001, latitude:39.6909},
                {longitude:115.4924, latitude:39.7387},
                {longitude:115.4399, latitude:39.7521},
                {longitude:115.4249, latitude:39.7745},
                {longitude:115.4832, latitude:39.7987},
                {longitude:115.5071, latitude:39.7837},
                {longitude:115.5522, latitude:39.7947},
                {longitude:115.5693, latitude:39.8138},
                {longitude:115.5143, latitude:39.8377},
                {longitude:115.5292, latitude:39.8755},
                {longitude:115.509, latitude:39.8842},
                {longitude:115.5205, latitude:39.9022},
                {longitude:115.4807, latitude:39.9358},
                {longitude:115.4262, latitude:39.9504},
                {longitude:115.4545, latitude:40.0297},
                {longitude:115.5522, latitude:40.0792},
                {longitude:115.5576, latitude:40.0951},
                {longitude:115.5907, latitude:40.0964},
                {longitude:115.5991, latitude:40.12},
                {longitude:115.7411, latitude:40.1322},
                {longitude:115.777, latitude:40.1776},
                {longitude:115.8066, latitude:40.1533},
                {longitude:115.8519, latitude:40.148},
                {longitude:115.8481, latitude:40.184},
                {longitude:115.8721, latitude:40.1872},
                {longitude:115.8981, latitude:40.2364},
                {longitude:115.9689, latitude:40.2639},
                {longitude:115.9228, latitude:40.3247},
                {longitude:115.9183, latitude:40.3539},
                {longitude:115.8593, latitude:40.3624},
                {longitude:115.8604, latitude:40.3757},
                {longitude:115.7708, latitude:40.4426},
                {longitude:115.7822, latitude:40.4921},
                {longitude:115.736, latitude:40.5038},
                {longitude:115.7532, latitude:40.5388},
                {longitude:115.7906, latitude:40.5609},
                {longitude:115.8198, latitude:40.5593},
                {longitude:115.8277, latitude:40.5873},
                {longitude:115.8854, latitude:40.5952},
                {longitude:115.9078, latitude:40.6173},
                {longitude:115.9668, latitude:40.6063},
                {longitude:115.9834, latitude:40.5788},
                {longitude:116.0256, latitude:40.6067},
                {longitude:116.03, latitude:40.5974},
                {longitude:116.1217, latitude:40.6292},
                {longitude:116.1106, latitude:40.6469},
                {longitude:116.1349, latitude:40.6671},
                {longitude:116.1646, latitude:40.6634},
                {longitude:116.1779, latitude:40.7079},
                {longitude:116.2338, latitude:40.7591},
                {longitude:116.2476, latitude:40.7918},
                {longitude:116.2734, latitude:40.7629},
                {longitude:116.3089, latitude:40.7519},
                {longitude:116.3295, latitude:40.7738},
                {longitude:116.4617, latitude:40.7698},
                {longitude:116.4572, latitude:40.7983},
                {longitude:116.3344, latitude:40.9046},
                {longitude:116.3342, latitude:40.9213},
                {longitude:116.3703, latitude:40.9437},
                {longitude:116.3985, latitude:40.906},
                {longitude:116.4742, latitude:40.8961},
                {longitude:116.4475, latitude:40.9538},
                {longitude:116.4562, latitude:40.9813},
                {longitude:116.5163, latitude:40.9752},
                {longitude:116.5633, latitude:40.9936},
                {longitude:116.5988, latitude:40.9747},
                {longitude:116.6145, latitude:40.9833},
                {longitude:116.6212, latitude:41.0283}
            ],
              fillColor: "#4F94CD33",
            //   fillColor: "#ffff0033",
              strokeColor: "#FFF",
              strokeWidth: 2,
              zIndex: 1
        }]	
上一篇:mysql 查询附近N公里内数据


下一篇:微信公众号开发--openLocation在安卓和ios端的细微差别