幽灵资源网 Design By www.bzswh.com
前言
微信小程序地图操作比较简单，api也很少，使用map组件来展示。说到地图，那就先来看基础定位：
定位用到wx.getLocation(OBJECT)函数，代码如下：
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})
定位成功会返回四个参数值，如下：
map属性太多，先看一下：
如果用到地图，基本上所有属性都会用到。
下面一一看一下，我们先看效果图吧，先看真相：
这里我只用了一个markers，就是定位当前位置的红色markers，用法如下：
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
_this.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
id: "1",
latitude: res.latitude,
longitude: res.longitude,
width: 50,
height: 50,
iconPath: "/assests/imgs/my.png",
title: "哪里"
}],
circles: [{
latitude: res.latitude,
longitude: res.longitude,
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 3000,
strokeWidth: 1
}]
})
}
})
这里加了circles，半径是3000米，具体的api可自行看官网。
接下来看看controls，控制层，在地图上显示控件，控件不随着地图移动，看API：
注意看示例图的右上角，有两个按钮，加减号，是控制地图scale的数值变化，动态缩放地图的，controls用法也很简单：
controls: [{
id: 1,
iconPath: '/assests/imgs/jian.png',
position: {
left: 320,
top: 100 - 50,
width: 20,
height: 20
},
clickable: true
},
{
id: 2,
iconPath: '/assests/imgs/jia.png',
position: {
left: 340,
top: 100 - 50,
width: 20,
height: 20
},
clickable: true
}
]
最后我们看一张gif图：
最后上一下具体代码：
wxml:
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: {{view.Height}}px;"></map>
js:
Page({
data: {
Height: 0,
scale: 13,
latitude: "",
longitude: "",
markers: [],
controls: [{
id: 1,
iconPath: '/assests/imgs/jian.png',
position: {
left: 320,
top: 100 - 50,
width: 20,
height: 20
},
clickable: true
},
{
id: 2,
iconPath: '/assests/imgs/jia.png',
position: {
left: 340,
top: 100 - 50,
width: 20,
height: 20
},
clickable: true
}
],
circles: []
},
onLoad: function () {
var _this = this;
wx.getSystemInfo({
success: function (res) {
//设置map高度，根据当前设备宽高满屏显示
_this.setData({
view: {
Height: res.windowHeight
}
})
}
})
wx.getLocation({
type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
_this.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: [{
id: "1",
latitude: res.latitude,
longitude: res.longitude,
width: 50,
height: 50,
iconPath: "/assests/imgs/my.png",
title: "哪里"
}],
circles: [{
latitude: res.latitude,
longitude: res.longitude,
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 3000,
strokeWidth: 1
}]
})
}
})
},
regionchange(e) {
console.log("regionchange===" + e.type)
},
//点击merkers
markertap(e) {
console.log(e.markerId)
wx.showActionSheet({
itemList: ["A"],
success: function (res) {
console.log(res.tapIndex)
},
fail: function (res) {
console.log(res.errMsg)
}
})
},
//点击缩放按钮动态请求数据
controltap(e) {
var that = this;
console.log("scale===" + this.data.scale)
if (e.controlId === 1) {
// if (this.data.scale === 13) {
that.setData({
scale: --this.data.scale
})
// }
} else {
// if (this.data.scale !== 13) {
that.setData({
scale: ++this.data.scale
})
// }
}
},
})
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/12/23
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？