快捷導航

微信小程序引入map組件并在地圖上標點的實現(xiàn)代碼

更新時間：2022年10月12日 11:03:11 作者：suoh's?Blog

這篇文章主要介紹了微信小程序引入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>請縮放并滑動地圖以查看更多區(qū)域的商戶</view>
        </view>
    </view>

map.js

// pages/home/home.js
Page({
    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        stitle: '東明路街道',
        latitude: "31.146740",
        longitude: "121.527690",
        scale: 14,//縮放級別，取值范圍為3-20
        // markers Array	標記點
        markers: [//標記點，傳入經(jīng)緯度，更多詳細參數(shù)見官網(wǎng)
           {
            latitude: "31.146740",
            longitude: "121.527690",
           }
        ],
    },
 
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     * 頁面開始加載 就會觸發(fā)
     */
    onLoad() {
        //獲取當前的地理位置
        //賦值經(jīng)緯度
        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不撐滿地圖的水印會顯示出來不太好看