uni-app中使用map
<h4 id="uni-app中使用地图显示当前的位置">uni-app中使用地图显示当前的位置</h4><pre><code>我们现在的需求是，显示用户在地图上所处的位置。
有的小伙伴可能会说，这个是不是需要接入第三方的地图。
其实是不需要的，从目前这个需求来看。
我们只需要引入uni-app提供的内置组件 map 。
然后设置经纬度以及缩放大小就行
下面我们就来简单的演示一下
</code></pre>
<h4 id="使用-map-组件显示某一个位置">使用 map 组件显示某一个位置</h4>
<pre><code><template>
<view>
<view class="page-body">
<view class="page-map-box">
<map style="width: 750rpx; height: 600rpx;"
:latitude="latitude"
:longitude="longitude"
:scale="scale"></map>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
msg:'12',
latitude: 30.572269, //纬度
longitude: 104.066541, //经度
scale: 14, //地图缩放程度
}
}
}
</script>
<style scoped>
</style>
</code></pre>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32f0079aea2a414f9eb6dbe20708a5dd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1903&h=751&s=189008&e=png&b=fcfafa" alt="01.png" loading="lazy"></p>
<h4 id="需要注意的点">需要注意的点</h4>
<pre><code>第1点：<map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。
我尝试过写百分比也是可以正常显示的。
在写百分比的时候注意父盒子的宽高，如果父盒子没有设置宽高，会导致地图显示不出来。
既然官方说了不要写百分比咋们就不要写了。
第2点：谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标，用错坐标类型会显示偏移。
</code></pre>
<h4 id="如何显示当前用户所在的位置">如何显示当前用户所在的位置</h4>
<pre><code>如果要显示用户当前所在位置。
我们需要借助一个api来获取。
uni.getLocation(options)获取当前的地理位置、速度
在获取之前，我们需要配置一下。
在HBuilder中的 uniapp项目下点击配置文件manifest.json。
选择微信小程序。填写【位置接口】描述。
或者在unpackage/dist/dev/mp-weixin/app.json中加入如下配置。
配置好后，在小程序的开发工具中看是否被正确编译了。
因为有些时候会出现丢死，此时需要再次重新写入
</code></pre>
<pre><code>{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"permission": {
"scope.userLocation": {
//描述一下你需要这个接口的原因，这个是必须的要写的。
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
// 你调用的方法，这个也是必须的，否者会出现调用失败
"requiredPrivateInfos": ["getLocation", "chooseLocation"],
"usingComponents": {}
}
</code></pre>
<h4 id="unigetlocation获取当前的地理位置速度">uni.getLocation({})获取当前的地理位置、速度</h4>
<pre><code><template>
<view>
<view class="page-body">
<view class="page-map-box">
<map style="width: 750rpx; height: 600rpx;"
:latitude="latitude"
:longitude="longitude"
:scale="scale"></map>
</view>
<view class="btn-position">
<button type="default" @tap="getLocationTap">获取定位</button>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
latitude:'' , //纬度
longitude: '', //经度
scale: 14, //地图缩放程度
}
},
methods:{
getLocationTap(){
let that=this;
uni.getLocation({
type: 'gcj02',
success: function (res) {
console.log('经度：' + res.longitude);
console.log('纬度：' + res.latitude);
that.latitude = res.latitude
that.longitude= res.longitude
},
fail: function (res) {
console.log('获取位置信息失败', res);
}
})
}
}
}
</script>
<style scoped>
.page-map-box{
width: 750rpx; height: 600rpx;
}
.btn-position{
margin-top: 10rpx;
}
</style>
</code></pre>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3a846a41c734736a8775fa5a33967e9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1868&h=595&s=163065&e=png&b=fbfafa" alt="02 (2).png" loading="lazy"></p>
<h4 id="标记当前这个点">标记当前这个点</h4>
<pre><code>如果要标记当前的这个点，需要我们借助markers属性。
它接受一个数组，这个数组就是要标记的点。
其中id需要传递，否者会有提示信息。
iconPath是标记的图标地址。可以去阿里矢量图标库中下载一个图片。
width,height是这个图标的大小。
latitude,longitude是经纬度
</code></pre>
<pre><code><template>
<view>
<view class="page-body">
<view class="page-map-box">
<map style="width: 750rpx; height: 600rpx;"
:latitude="latitude"
:longitude="longitude"
:scale="scale"
:markers="markers"
></map>
</view>
<view class="btn-position">
<button type="default" @tap="getLocationTap">获取定位</button>
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
latitude: '',
longitude: '',
scale: 14, // 设置地图的缩放级别
markers: [ // 设置标记点
{
id:1001,
width:50,
height:50,
latitude: this.latitude*1,
longitude: this.longitude*1,
iconPath: '../../static/weizhi.png',
},
],
}
},
methods:{
getLocationTap(){
let that=this;
uni.getLocation({
type: 'gcj02',
success: function (res) {
console.log('经度：' + res.longitude);
console.log('纬度：' + res.latitude);
that.latitude = res.latitude
that.longitude= res.longitude
},
fail: function (res) {
console.log('获取位置信息失败', res);
}
})
}
}
}
</script>
<style scoped>
.page-map-box{
width: 750rpx; height: 600rpx;
}
.btn-position{
margin-top: 10rpx;
}
</style>
</code></pre>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/486b8bb352f64d4ab5d9c135fce2c160~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1649&h=617&s=72618&e=png&b=fbf9f9" alt="03.png" loading="lazy"></p>
</div>
<div id="MySignature" role="contentinfo">
<div style="width:818px;background:#f5f5f5; padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑; font-size: 13px;" >
<h1 style="font-size: 24px;"> 遇见问题，这是你成长的机会，如果你能够解决，这就是收获。 </h1>
<div style="padding:10px">
作者：晚来南风晚相识 <br>
出处：https://www.cnblogs.com/IwishIcould/ <br>
<p> 想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！</p>
<p>如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！</P>
<p> 万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！</p>
<p> 想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！</p>
<div style="display: flex;">
<div style="margin-right: 100px;text-align: center;">
<img src="//images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179">
<div>
支付宝
</div>
</div>
<div style="text-align: center;">
<img src="//images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg">
<div>微信</div>
</div>
</div>
本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接 <br>
如果文中有什么错误，欢迎指出。以免更多的人被误导。 <br>
</div>
</div><br><br>
来源：https://www.cnblogs.com/IwishIcould/p/17801654.html
頁:
[1]