纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

微信小程序map地图使用 微信小程序map地图使用方法详解

热爱°可抵岁月漫长   2021-10-12 我要评论
想了解微信小程序map地图使用方法详解的相关内容吗,热爱°可抵岁月漫长在本文为您仔细讲解微信小程序map地图使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:微信小程序,地图,下面大家一起来学习吧。

以下代码是主要的代码片段

<!-- 地图部分 -->
  <!-- enable-traffic 显示路况 -->
  <view class="map_container">
   <map id='customerMap' class="map" :longitude='longitude' :latitude='latitude' :scale='scale'
    :markers='markers' :controls="controls" show-location
    @markertap="markertap" @updated="updatedmap" @controltap='bindcontroltap'></map>
</view>
data(){
  return{
      latitude:23.140962248,
      longitude:113.305301124,
      scale:12,
      markers:[     {id: '',
     latitude: 23.140962248,
     longitude: 113.305301124,
     iconPath: '../static/select-dw.png',//当前位置图标路径
     width: 25,
     height: 39,
     },
                    {
                    latitude: 23.129742,
     longitude: 113.26754,
     iconPath: '../static/mark.png',//客户图标路径
     width: 28,
     height: 28,
     label: {
      content: '詹俊俊',
      textAlign: 'center',
      fontSize: 12
        }
                    }]  
 
  }
 
},
onReady() {
 this.mapCtx = wx.createMapContext('customerMap')
},
methods:{
 
    // 点击标记点
   markertap(e) {
    let { markerId } = e.detail;
    let item = this.markers.find(v => v.id === markerId);
    console.log('item', item)
    uni.openLocation({
     latitude: Number(item.latitude),
     longitude: Number(item.longitude),
     name: item.label.content,
     address: item.address,
     success: function() {
      console.log('success');
     }
    });
   },
    // 当地图加载完成后触发
   updatedmap() {
    this.mapUpdated = true;
    console.log('执行')
    this.includePoints(); //所有客户显示在视图内
   },
    // 让标记点在地图可视视野内
   includePoints() {
    const that = this
    const points = [{
     latitude: that.latitude,
     longitude: that.longitude
    }];
    this.markers.forEach(item => {
     const obi = {
      latitude: item.latitude,
      longitude: item.longitude
     }
     points.push(obi)
    })
    this.mapCtx.includePoints({
     padding: [80, 50, 80, 50],
     points
    })
   },
}

相关文章

猜您喜欢

  • JavaScript web 表单 JavaScript web表单功能交流干货满满

    想了解JavaScript web表单功能交流干货满满的相关内容吗,执久呀在本文为您仔细讲解JavaScript web 表单的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript,web,表单,css,web表单,下面大家一起来学习吧。..
  • Java 异常处理 Java 基础语法 异常处理

    想了解Java 基础语法 异常处理的相关内容吗,吞吞吐吐大魔王在本文为您仔细讲解Java 异常处理的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,异常处理,Java,异常,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.3a4a5a.com 【3A软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式