說明：最近入住微信小程式，將自己所學經歷分享出來，包括學到的知識，踩到的坑，一起分享給大家，後續會慢慢更新：

首先針對一些幾乎沒有基礎的童鞋，附上一些連結，大致看完後能夠有能力製作簡單的小程式了：

另外特別推薦一波福利（樣式庫，也就是說，各種弄好的樣式，直接用，是不是很舒服？）：

       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連結：包含手指控制圖片放大縮小，動態新增標籤，邊界限制等