javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序map组件

微信小程序引入map组件并在地图上标点的实现代码

作者:suoh's Blog

这篇文章主要介绍了微信小程序引入map组件并在地图上标点,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

高德地图导航,用处非常广泛,今天小编通过本文给大家分享微信小程序引入map组件并在地图上标点的实现方法,先给大家展示下效果图感觉不错可以参考实现代码。

效果:

复制粘贴即可

map.wxml

    <!-- 这是地图部分 -->
    <view class="map_container">
        <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}" bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap'show-location></map>
        <view class="map_text">
            <view>目前查到巡检工单未处理完成的商家有4户</view>
            <view>请缩放并滑动地图以查看更多区域的商户</view>
        </view>
    </view>

map.js

// pages/home/home.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        stitle: '东明路街道',
        latitude: "31.146740",
        longitude: "121.527690",
        scale: 14,//缩放级别,取值范围为3-20
        // markers Array	标记点
        markers: [//标记点,传入经纬度,更多详细参数见官网
           {
            latitude: "31.146740",
            longitude: "121.527690",
           }
        ],
    },
 
    /**
     * 生命周期函数--监听页面加载
     * 页面开始加载 就会触发
     */
    onLoad() {
        //获取当前的地理位置
        //赋值经纬度
        this.setData({
            latitude: "31.146740",
            longitude: "121.527690",
        })
    },
 
})

map.wxss

page {
    height: 90%;
}
.map_container {
    height: 100%;
    width: 100%;
    position: relative;
 
}
 
.map_text {
    background: #fff;
    height: 70rpx;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    padding:10rpx 20rpx;
}
.map_text view{
    font-size: 24rpx;
    padding-bottom:5rpx;
    color: #5A5A5C;
}
.map {
    height: 100%;
    width: 100%;
}

 注意:如果page不撑满地图的水印会显示出来不太好看

解决方法:

可以像我一样在底部加上定位的字体说明,设置一个背景给他挡住,或者page设置100%,让底部导航给他挡住即可。至于有没有方法设置让水印不显示,有知道的小伙伴可以留言给我,我就不研究啦~ 

到此这篇关于微信小程序引入map组件并在地图上标点的文章就介绍到这了,更多相关微信小程序map组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文