uniapp微信小程序地图全屏显示配送范围

简介: uniapp微信小程序地图全屏显示配送范围

一、官方文档

微信小程序map官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/map.html

二、显示效果图

三、源码

scale:缩放级别缩放级别,取值范围为3-20,数字越小,地图比例越大(单位面积内显示区域越大)

longitude:经度

latitude:维度

markers:标记点

circles:圆

color:描边颜色

radius:圆的半径,单位m

fillColor:填充颜色

strokeWidth:描边的宽度

iconPath:显示图标

<template>
  <view style="width: 100%;height: 100%;">
    <map style="width: 100%;height: 100vh;" scale=11 longitude="116.513" latitude="39.9313" :markers="markers" :circles="circles">
    </map>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        circles: [{
          latitude: 39.9313,
          longitude: 116.513,
          color: '#FF0000DD',
          fillColor: '#7cb5ec88',
          radius: 5000,
          strokeWidth: 1
        }],
        markers: [{
          iconPath: "/static/mark.png",
          id: 0,
          longitude: 116.513,
          latitude: 39.9313,
          width: 30,
          height: 30
        }]
      }
    },
  }
</script>
 
<style>
</style>


四、原生小程序地图参考文章

 

小程序地图多个 circles 使用demohttps://blog.csdn.net/qq_35713752/article/details/103693671

目录
相关文章
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“鼻护灵”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“鼻护灵”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的“财来财往”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的“财来财往”微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
22小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
14 7
|
23小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的传统戏曲推广微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的传统戏曲推广微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的童装购买平台微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的童装购买平台微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的美食推荐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的美食推荐小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的蛋糕订购小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的蛋糕订购小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
23小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的仓库点单小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的仓库点单小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的自驾游拼团小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的自驾游拼团小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序校园订餐的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序校园订餐的详细设计和实现(源码+lw+部署文档+讲解等)