说明：最近入住微信小程序，将自己所学经历分享出来，包括学到的知识，踩到的坑，一起分享给大家，后续会慢慢更新：
首先针对一些几乎没有基础的童鞋，附上一些链接，大致看完后能够有能力制作简单的小程序了：
另外特别推荐一波福利（样式库，也就是说，各种弄好的样式，直接用，是不是很舒服？）：
https://github.com/weui/weui-wxss
先上效果图：
大概就是这样了：点的位置与数量靠一个数组来确定，是不是你想要的效果呢：
接着上代码：
首先是wxml：
<view class="classname" wx:for="{{array}}">
<image style="transform:translate({{item.offsetX}}px, {{item.offsetY}}px) ;" class="img" id="{{stv.id[index]}}" src="../../images/location_red.png" bindtap="onBind"></image>
</view>
简单的来说，使用wx:for，其中放入数组，他会自动的去循环遍历得到数组长度的标签，然后是要动态打点，那么点肯定有个偏移度，同样的动态设置偏移度就可以了，此处设定一个点为一个对象，那么每次遍历得到对应的对象的偏移量也就基本实现了效果了
js：
var arr = new Array();
var location1 = {
offsetX: 10,
offsetY: 10,
name: "景点1"
}
var location2 = {
offsetX: 20,
offsetY: 20,
name: "景点2"
}
var location3 = {
offsetX: 60,
offsetY: 60,
name: "景点3"
}
arr.push(location1);
arr.push(location2);
arr.push(location3);
Page({
/**
* 页面的初始数据
*/
data: {
array: arr,
},
onBind: function () {
console.log("点击了");
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
更简单，对象值赋给arr就可以了，联想到以后访问服务器得到数组
css：
.img{
width: 10px;
height: 10px;
position: absolute
}
重要的是确定position为absolute，然后就完成了效果了
小程序新人小白，如有不对，请评论指出，因网上搜未找到相关方法，就自己弄了，若是帮到你，不胜荣幸！
另外附有demo链接：包含手指控制图片放大缩小，动态添加标签，边界限制等
地址：点击打开链接