微信公众号开发

微信小程序 map组件 include-points 缩放视野以包含所有给定的坐标点

本文主要是介绍微信小程序 map组件 include-points 缩放视野以包含所有给定的坐标点，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

代码如下：

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 99%; height: 99vh;" show-compass :latitude="latitude" :longitude="longitude" :markers="markers" :include-points="points" id="mymap">
                </map>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                id:0, // 使用 marker点击事件 需要填写id
                title: 'map',
                // latitude: 33.50306,
                // longitude: 116.39742,
                markers: [{
                    latitude: 33.50306,
                    longitude: 119.14108,
                    iconPath: '../../static/logo.png'
                }, {
                    latitude: 33.600533333,
                    longitude: 119.04591338,
                    iconPath: '../../static/logo.png'
                }]
            }
        },
        onReady: function(event) {
         this.mapCtx = wx.createMapContext('mymap');
          this.includePoints();
        },
        
        methods: { 
            includePoints() {
                var that = this;
                that.mapCtx.includePoints({
                  padding: [ 70,],
                  points: [{
                      latitude: 33.50306,
                      longitude: 119.14108,                      
                    },
                    {
                      latitude: 33.600533333,
                      longitude: 119.04591338,                      
                    }
                  ]
                })
              }
        },
    }
</script>

 

这篇关于微信小程序 map组件 include-points 缩放视野以包含所有给定的坐标点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航