zoukankan      html  css  js  c++  java
  • 微信小程序 map组件 include-points 缩放视野以包含所有给定的坐标点

    代码如下:

    <template>
        <view>
            <view class="page-body">
                <view class="page-section page-section-gap">
                    <map style=" 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>
    ^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的关注我,一起学习,一起分享.~ ^_^
  • 相关阅读:
    demo12-回到顶部
    demo11-友情链接
    demo10-超链接标签
    demo09-程序员练习
    demo08-图片标签
    demo07-盒子标签
    demo06-字体标签
    demo05-换行标签
    转&nbsp;j2ee&nbsp;.线程池.对象池,连接池
    几种开源Java&nbsp;Web容器线程池…
  • 原文地址:https://www.cnblogs.com/blts/p/15000345.html
Copyright © 2011-2022 走看看