微信小程序 |
您所在的位置:网站首页 › 微信位置打点标注怎么弄 › 微信小程序 |
前言:
在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线 小程序官方地图 map 文档参考 小程序官方地图 map 相关 API (地图组件控制)参考 问题解决:这里利用我母校:西北农林科技大学 做实验地。对垃圾桶进行标记。这里为了减少代码的冗余,只选了几个位置。 说明:此代码只是简单的实现了固定标点,是根据垃圾桶的经纬度,利用map地图,实现固定位置的标点。对应位置移动物体,数量增减物体(如单车、小吃摊),是无法实现动态改变标点。需要修改代码来实现的。 效果图+项目结构如下: 源码下载:https://download.csdn.net/download/weixin_43042683/12461689 这是我上传csdn的源码,有csdn的VIP的可以下载,直接导入就可以用,如果没有就不要破费了哈,下面给了代码,自己复制粘贴吧 关键代码index.js代码: Page({ data: { longitude: 108.07332649827005, //默认定位经度 latitude: 34.28626496061992, //默认定位纬度 markers: [ //八教垃圾桶位置 { id: 0, iconPath: "../image/1.jpg", latitude: 34.28594472914285, longitude: 108.07340294122699, width: 20, //图片显示宽度 height: 20 //图片显示高度 }, //三教垃圾桶位置 { id: 1, iconPath: "../image/1.jpg", latitude: 34.28345098172088, longitude: 108.07423643767835, width: 20, height: 20 }, //北秀垃圾桶位置 { id: 2, iconPath: "../image/1.jpg", latitude: 34.28520896777005, longitude: 108.0694815516472, width: 20, height: 20 }, //信工楼垃圾桶位置 { id: 3, iconPath: "../image/1.jpg", latitude: 34.2842427171466, longitude: 108.0724158883095, width: 20, height: 20 }, //10号寝室楼的位置 { id: 4, iconPath: "../image/1.jpg", latitude: 34.286067170734036, longitude: 108.0664473026991, width: 20, height: 20 }, //14号寝室楼的位置 { id: 5, iconPath: "../image/1.jpg", latitude: 34.287375788724745, longitude: 108.06752823293209, width: 20, height: 20 }, //理学院垃圾桶位置 { id: 6, iconPath: "../image/1.jpg", latitude: 34.28801845563627, longitude: 108.07408086955549, width: 20, height: 20 }, //食品院垃圾桶位置 { id: 7, iconPath: "../image/1.jpg", latitude: 34.288367488192435, longitude: 108.07558692991735, width: 20, height: 20 }, //动科楼垃圾桶位置 { id: 8, iconPath: "../image/1.jpg", latitude: 34.28487044889044, longitude: 108.07326279580593, width: 20, height: 20 }] }, onLoad: function () { var that = this; wx.getLocation({ type: "wgs84", success: function (res) { var latitude = res.latitude; var longitude = res.longitude; //console.log(res.latitude); that.setData({ latitude: res.latitude, longitude: res.longitude, markers: [{ latitude: res.latitude, longitude: res.longitude }] }) } }) }, onReady: function () { } })index.wxml代码 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |