微信小程序 map marker 学校地图标记教学楼 demo

微信小程序官方文档

地图标记主要是帮助 新生、外来人员 尽快了解学校的教学楼、部门…

腾讯地图数据标记不够详细全面、数据老旧（特别是校内）

微信小程序 + 定位特别合适解决类似问题，像校园浏览，导航…

---

<map id="mapp" latitude="37.488" longitude="121.4499" scale="16" 
	 show-compass="true"show-scale="true" 	
	 markers="{{markers}}">
</map>

#mapp {
	height: 1000rpx; 
	width: 100%;
}

Page({
  data: {
    markers: [{
      iconPath: "../../images/building/25.png",
      id: 1,
      latitude: 37.48628,
      longitude: 121.44864,
      width: 25,
      height: 15
    }, {
      iconPath: "../../images/building/26.png",
      id: 2,
      latitude: 37.485479,
      longitude: 121.448659,
      width: 25,
      height: 15
    }, {
      iconPath: "../../images/building/dading.png",
      id: 3,
      latitude: 37.487096,
      longitude: 121.448627,
      width: 25,
      height: 15
    }, {
      iconPath: "../../images/building/dahuo.png",
      id: 4,
      latitude: 37.485717,
      longitude: 121.444544,
      width: 66,
      height: 15
    }, {
      iconPath: "../../images/building/dongxiaocaochang.png",
      id: 5,
      latitude: 37.485985,
      longitude: 121.449893,
      width: 45,
      height: 15
    }, {
      iconPath: "../../images/building/dongxiaodongmen.png",
      id: 6,
      latitude: 37.4875,
      longitude: 121.4499,
      width: 45,
      height: 15
    }, {
      iconPath: "../../images/building/dongxiaonanmen.png",
      id: 7,
      latitude: 37.482146,
      longitude: 121.445767,
      width: 45,
      height: 15
    }, {
      iconPath: "../../images/building/erjiaobei.png",
      id: 8,
      latitude: 37.487160,
      longitude: 121.445252,
      width: 35,
      height: 15
    }, {
      iconPath: "../../images/building/erjiaonan.png",
      id: 9,
      latitude: 37.486726,
      longitude: 121.445108,
      width: 35,
      height: 15
    }, {
      iconPath: "../../images/building/liujiao.png",
      id: 10,
      latitude: 37.487181,
      longitude: 121.443187,
      width: 60,
      height: 15
    }, {
      iconPath: "../../images/building/qijiao.png",
      id: 11,
      latitude: 37.486313,
      longitude: 121.443509,
      width: 60,
      height: 15
    }, {
      iconPath: "../../images/building/sanjiao.png",
      id: 12,
      latitude: 37.487594,
      longitude: 121.446175,
      width: 25,
      height: 15
    }, {
      iconPath: "../../images/building/shangxueshiyanzhongxin.png",
      id: 13,
      latitude: 37.487518,
      longitude: 121.443396,
      width: 60,
      height: 15
    }, {
      iconPath: "../../images/building/sijiao.png",
      id: 14,
      latitude: 37.486798,
      longitude: 121.444351,
      width: 25,
      height: 15
    }, {
      iconPath: "../../images/building/tushuguan.png",
      id: 15,
      latitude: 37.485764,
      longitude: 121.445285,
      width: 35,
      height: 15
    }, {
      iconPath: "../../images/building/wujiao.png",
      id: 16,
      latitude: 37.487718,
      longitude: 121.444732,
      width: 25,
      height: 15
    }]
  },
})

---

---

这些小图片我是通过 ppt 做出来的 最后图片文件大小3~7k

关于精确经纬度 请参考这篇博客。

---

喜欢或对你有帮助，请点个赞吧 。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问 。

---