您的位置:首页 > 移动开发 > 微信开发

微信小程序地图导航

2017-11-09 17:18 239 查看
微信小程序地图导航

1.在.wxml文件中需要位置创建map组件、导航按钮或图标

<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}"></map>
<view class="address-wrap">
<view class='address-desc'>
<text>河南XXXX有限公司</text>
<text class='ftgrey'>河南-郑州-二七区</text>
</view>
<view
class='address-point'>
<image src="../../image/icon-fujin.png" bindtap="bindMap"></image>
</view>
</view>


2.js

//导入图片自适应
//var WxAutoImage = require("js/wxAutoImageCal.js");
var app = getApp();
Page({
data: {
//目标经纬度
latitude: 34.754316,
longitude: 113.677484,
speed: 0,//速度
accuracy: 16,//位置精准度
markers: [{
latitude: 34.754316,
longitude: 113.677484,
}]
},
bindMap: function (e) {
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
wx.openLocation({
latitude: latitude,
longitude: longitude,
name: "河南特XXXX公司",
scale: 28
})
}
})
},
onLoad: function(){
}
})


3.css

map{
width: 100%;
height:630px;
}
.address-wrap{
width: 100%;
height: 60px;
display: flex;
align-items: center;
padding: 0 3%;
background-color: #f7f7f7;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
position: fixed;
bottom: 0;
}
.address-desc{
font-size: 14px;
flex: 1;
align-self: center;
}
text{
width: 100%;
display: inline-block;
}
.address-point{
width:

24px;
height: 24px;
margin-left:10px;
}
image{
width: 24px;
height: 24px;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  微信 导航 地图