uniapp 地图使用

明日之后

[JavaScript] 纯文本查看 复制代码

<map 
                longitude="经度" 
                latitude="纬度" 
                markers="标记点" 
                scale="缩放规模默认为16，最大为18"
        ><map/>

[JavaScript] 纯文本查看 复制代码

//标记点
        [
                {        
                        longitude="经度",
                        latitude="纬度", 
                        iconPath:'标记图片',
                        width:图片宽,
                        height:图片高,
                        titile:'点击标记点后显示的文字'
                }
        ]

代码示例:

[JavaScript] 纯文本查看 复制代码

<template>
        <view class="contact">

                <map name="" class='map' :longitude="jingdu" :latitude="weidu" :markers="marks" scale="15"></map>
                
        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                jingdu:0,
                                weidu:0,
                                marks:[{longitude:0,latitude:0,iconPath:'../../static/2.png',width:30,height:30,title:'这里'}]
                        }
                },
                methods: {
                        phone(){
                                uni.makePhoneCall({
                                    phoneNumber: '114' //仅为示例
                                });
                        }
                }
        }
</script>

<style lang='scss'>
        .contact{
                .img{
                        width: 750rpx;
                        height: 320rpx;
                }
                .info{
                        padding: 10rpx 20rpx;
                        font-size: 30rpx;
                        view{
                                line-height: 60rpx;
                                border-bottom: solid 1px #eee;
                        }
                }
                .map{
                        height: 750rpx;
                        width: 750rpx;
                }
        }
</style>