微信小程序引入map组件并在地图上标点

效果：

复制粘贴即可

map.wxml

    <!-- 这是地图部分 --><view class="map_container"><map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}" bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap'show-location></map><view class="map_text"><view>目前查到巡检工单未处理完成的商家有4户</view><view>请缩放并滑动地图以查看更多区域的商户</view></view></view>

map.js

// pages/home/home.js
Page({/*** 页面的初始数据*/data: {stitle: '东明路街道',latitude: "31.146740",longitude: "121.527690",scale: 14,//缩放级别，取值范围为3-20// markers Array    标记点markers: [//标记点，传入经纬度，更多详细参数见官网{latitude: "31.146740",longitude: "121.527690",}],},/*** 生命周期函数--监听页面加载* 页面开始加载 就会触发*/onLoad() {//获取当前的地理位置//赋值经纬度this.setData({latitude: "31.146740",longitude: "121.527690",})},})

map.wxss

page {height: 90%;
}
.map_container {height: 100%;width: 100%;position: relative;}.map_text {background: #fff;height: 70rpx;width: 100%;position: absolute;bottom: 0;right: 0;padding:10rpx 20rpx;
}
.map_text view{font-size: 24rpx;padding-bottom:5rpx;color: #5A5A5C;
}
.map {height: 100%;width: 100%;
}

注意：如果page不撑满地图的水印会显示出来不太好看

解决方法：

可以像我一样在底部加上定位的字体说明，设置一个背景给他挡住，或者page设置100%，让底部导航给他挡住即可。至于有没有方法设置让水印不显示，有知道的小伙伴可以留言给我，我就不研究啦~

微信小程序引入map组件并在地图上标点相关推荐

微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...
微信小程序引入日历组件
GitHub - treadpit/wx_calendar: 微信小程序-日历组件
微信小程序覆盖map组件
微信小程序 MAP组件现在可以采用cover-view 来覆盖MAP组件 <map><cover-view>xxxx</cover-view> </map& ...
微信小程序引入原生组件——WeUI组件库，详细步骤
第一步:查看是否可使用npm命令,没有则安装: 我这里已经安装了,如果没有则安装node.js node官网下载地址:https://nodejs.org/en/ 注意这个windows 64位的: ...
微信小程序引入WeUI组件库（笔记）
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
微信小程序实战 -- map：根据百度地图的api来获取地址信息
先附上实现效果: 实现的功能有:(中间"红色图标"所在位置为选择的定位) 1. 拖动地图,进行定位: 2. 根据输入的内容进行地图定位. 一. 申请秘钥ak ,下载百度地图微 ...
微信小程序使用map组件地图获取位置、移动选点、逆地址解析
实现拖动地图,实现地图上选点,并解析地址效果如下图:中心图片为目标位置.红色图标为视图发生变化时移动到中心点. wxml文件: <view> <m ...
微信小程序：map组件所在页面加载慢，长时间白屏的问题
问题:点击进入有map组件的tab页面时,页面长时间白屏,很久才加载出来,公司大佬找到了解决方法解决思路如下这是修改前的代码这是修改后的代码两者主要是看map的位置,修改前的map在class ...
微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

微信小程序引入map组件并在地图上标点

复制粘贴即可

map.wxml

map.js

map.wxss

微信小程序引入map组件并在地图上标点相关推荐

最新文章

热门文章