小程序map地图上显示多个marker
wxml
<map
id="myMap"
style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
show-location
bindmarkertap="selectMarket"
include-points="{{markers}}"
bindmarkertap="toaddress"
>
</map>
js
Page({ /**
* 页面的初始数据
*/
data: { latitude: 24.4795100000,
longitude: 118.0894800000,
markers: [
{
id: 0,
latitude: 24.4455700000,
longitude: 118.0824000000,
// alpha:0,
callout:{
content: " 厦门思明区政府 \n 12000元/㎡",
padding:10,
display:'ALWAYS',
textAlign:'center',
// borderRadius: 10,
// borderColor:'#ff0000',
// borderWidth: 2,
} },
{
id: 1,
latitude: 24.5131500000,
longitude: 118.1468600000,
callout: {
content: " 厦门湖里区政府 \n 70000元/㎡",
padding: 10,
display: 'ALWAYS',
textAlign: 'center'
} },
{
id: 2,
latitude: 24.7235700000,
longitude: 118.1517300000,
callout: {
content: " 厦门市同安区政府 \n 100",
padding: 10,
display: 'ALWAYS',
textAlign: 'center'
} },
{
id: 3,
latitude: 24.5759000000,
longitude: 118.0972700000,
callout: {
content: " 厦门市集美区政府 \n 100",
padding: 10,
display: 'ALWAYS',
textAlign: 'center'
} },
{
id: 4,
latitude: 24.4846000000,
longitude: 118.0329300000,
callout: {
content: " 厦门市海沧区政府 \n 100",
padding: 10,
display: 'ALWAYS',
textAlign: 'center'
} },
{
id: 5,
latitude: 24.6196000000,
longitude: 118.2478900000,
callout: {
content: " 厦门市翔安区政府 \n 100",
padding: 10,
display: 'ALWAYS',
textAlign: 'center'
} },
],
mapWidth:'',
mapHeight:'' },
toaddress:function(e){
console.log(e)
var id =e.markerId
console.log(id)
// wx.openLocation({
// latitude: this.data.markers[id].latitude,
// longitude: this.data.markers[id].longitude,
// })
wx.navigateTo({
url: '/pages/index/index',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var sy = wx.getSystemInfoSync(),
mapWidth = sy.windowWidth*2,
mapHeight = sy.windowHeight*2;
this.setData({
mapWidth:mapWidth,
mapHeight:mapHeight
})
},
转: https://blog.csdn.net/weixin_42274835/article/details/81707972
小程序map地图上显示多个marker的更多相关文章
- 微信小程序map地图的一些使用注意事项
1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提 ...
- 小程序map地图多点定位
最近需求有一个类似共享单车查看附近单车的功能,看了看小程序map api对多点定位显示描述的不怎么清晰.显示定位数组添加多个时就不显示了.踩了几个坑写了几个方法.最终弄出来了.有问题建议欢迎留言. h ...
- 微信小程序解决地图上的层级关系
在有带地图的手机页面上,view无法显示在地图上方,所以,在wxml中,使用: <cover-view></cover-view> 能使view显示在地图上 注: 在该标签内部 ...
- 小程序map地图点击makert放大效果和点击放大地图
WXML文件和JS文件代码在下方 <view class='map'> <map id="map" longitude="{{location.lng} ...
- 微信小程序----map组件实现检索【定位位置】周边的POI
效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- OpenLayers在地图上显示统计图,饼图线状图柱状图,修复统计图跳动的问题
环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...
- 「小程序JAVA实战」小程序页面的上拉下拉刷新(50)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxuyemiandeshanglaxialashuaxin49/ 之前已经 ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
随机推荐
- elasticsearch 7版本 基础操作
elasticsearch 7版本 基础操作 首先我们浏览器http://localhost:5601/进入 kibana里的Console中输入 首先让我们在 Console 中输入: PUT t1 ...
- c# Dictionary<K,V>
- mybatis中对数据表操作的四种语法
查询数据(select) select...from...where... 如:查询学生表中学号为某数的学生的全部信息 select * from stu where id=#{id} 增加数据(in ...
- CentOS7编译安装httpd-2.4.41 php7.3
CentOS7编译安装httpd-2.4.41 php7.3 安装参考环境: CentOS Linux release 7.5.1804 (Core) 一.安装依赖包 httpd安装的依赖包 # yu ...
- com.mysql.jdbc.Driver not loaded. Are you sure you've included the correct jdbc driver in :jdbc_driver_library?
把对应的jdbc jar包放到 /usr/share/logstash/logstash-core/lib/jars/路径 下即可.可以在配置文件不用配置驱动库.
- redis 设置密码并运行外部连接
redis默认是不能远程访问的,如果希望多台机子共用redis数据库,那就需要开启redis远程连接访问.既然可以远程连接了,那就需要密码登陆,否则不安全.下面是具体的方法,按照步骤一步一步来就OK了 ...
- spark HMM
Scala实现的: https://github.com/skrusche63/spark-intent/tree/master/src/main/scala/de/kp/scala/hmm http ...
- (java)selenium webdriver学习---三种等待时间方法:显式等待,隐式等待,强制等待
selenium webdriver学习---三种等待时间方法:显式等待,隐式等待,强制等待 本例包括窗口最大化,刷新,切换到指定窗口,后退,前进,获取当前窗口url等操作: import java. ...
- nginx配置白名单
配置如下: http模块: http { include mime.types; default_type application/octet-stream; #log_format main '$r ...
- Spring源码窥探之:FactoryBean
1. 定义Fish实体类 /** * @author 70KG * @Title: Fish * @Description: * @date 2018/7/22下午5:00 * @From www.n ...