wxml

  1. <map
  2. id="myMap"
  3. style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" latitude="{{latitude}}"
  4. longitude="{{longitude}}"
  5. markers="{{markers}}"
  6. show-location
  7. bindmarkertap="selectMarket"
  8. include-points="{{markers}}"
  9. bindmarkertap="toaddress"
  10. >
  11. </map>

js

  1. Page({
  2.  
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7.  
  8. latitude: 24.4795100000,
  9. longitude: 118.0894800000,
  10. markers: [
  11. {
  12. id: 0,
  13. latitude: 24.4455700000,
  14. longitude: 118.0824000000,
  15. // alpha:0,
  16. callout:{
  17. content: " 厦门思明区政府 \n 12000元/㎡",
  18. padding:10,
  19. display:'ALWAYS',
  20. textAlign:'center',
  21. // borderRadius: 10,
  22. // borderColor:'#ff0000',
  23. // borderWidth: 2,
  24. }
  25.  
  26. },
  27. {
  28. id: 1,
  29. latitude: 24.5131500000,
  30. longitude: 118.1468600000,
  31. callout: {
  32. content: " 厦门湖里区政府 \n 70000元/㎡",
  33. padding: 10,
  34. display: 'ALWAYS',
  35. textAlign: 'center'
  36. }
  37.  
  38. },
  39. {
  40. id: 2,
  41. latitude: 24.7235700000,
  42. longitude: 118.1517300000,
  43. callout: {
  44. content: " 厦门市同安区政府 \n 100",
  45. padding: 10,
  46. display: 'ALWAYS',
  47. textAlign: 'center'
  48. }
  49.  
  50. },
  51. {
  52. id: 3,
  53. latitude: 24.5759000000,
  54. longitude: 118.0972700000,
  55. callout: {
  56. content: " 厦门市集美区政府 \n 100",
  57. padding: 10,
  58. display: 'ALWAYS',
  59. textAlign: 'center'
  60. }
  61.  
  62. },
  63. {
  64. id: 4,
  65. latitude: 24.4846000000,
  66. longitude: 118.0329300000,
  67. callout: {
  68. content: " 厦门市海沧区政府 \n 100",
  69. padding: 10,
  70. display: 'ALWAYS',
  71. textAlign: 'center'
  72. }
  73.  
  74. },
  75. {
  76. id: 5,
  77. latitude: 24.6196000000,
  78. longitude: 118.2478900000,
  79. callout: {
  80. content: " 厦门市翔安区政府 \n 100",
  81. padding: 10,
  82. display: 'ALWAYS',
  83. textAlign: 'center'
  84. }
  85.  
  86. },
  87. ],
  88. mapWidth:'',
  89. mapHeight:''
  90.  
  91. },
  92. toaddress:function(e){
  93. console.log(e)
  94. var id =e.markerId
  95. console.log(id)
  96. // wx.openLocation({
  97. // latitude: this.data.markers[id].latitude,
  98. // longitude: this.data.markers[id].longitude,
  99. // })
  100. wx.navigateTo({
  101. url: '/pages/index/index',
  102. success: function(res) {},
  103. fail: function(res) {},
  104. complete: function(res) {},
  105. })
  106. },
  107.  
  108. /**
  109. * 生命周期函数--监听页面加载
  110. */
  111. onLoad: function(options) {
  112. var sy = wx.getSystemInfoSync(),
  113. mapWidth = sy.windowWidth*2,
  114. mapHeight = sy.windowHeight*2;
  115. this.setData({
  116. mapWidth:mapWidth,
  117. mapHeight:mapHeight
  118. })
  119. },

转: https://blog.csdn.net/weixin_42274835/article/details/81707972

小程序map地图上显示多个marker的更多相关文章

  1. 微信小程序map地图的一些使用注意事项

    1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提 ...

  2. 小程序map地图多点定位

    最近需求有一个类似共享单车查看附近单车的功能,看了看小程序map api对多点定位显示描述的不怎么清晰.显示定位数组添加多个时就不显示了.踩了几个坑写了几个方法.最终弄出来了.有问题建议欢迎留言. h ...

  3. 微信小程序解决地图上的层级关系

    在有带地图的手机页面上,view无法显示在地图上方,所以,在wxml中,使用: <cover-view></cover-view> 能使view显示在地图上 注: 在该标签内部 ...

  4. 小程序map地图点击makert放大效果和点击放大地图

    WXML文件和JS文件代码在下方 <view class='map'> <map id="map" longitude="{{location.lng} ...

  5. 微信小程序----map组件实现检索【定位位置】周边的POI

    效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...

  6. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

  7. OpenLayers在地图上显示统计图,饼图线状图柱状图,修复统计图跳动的问题

    环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...

  8. 「小程序JAVA实战」小程序页面的上拉下拉刷新(50)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxuyemiandeshanglaxialashuaxin49/ 之前已经 ...

  9. 小程序实现图片上传,预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

随机推荐

  1. 如何为UEditor设置默认值

    // 初始化UEditor var ue = UE.getEditor('editor'); ue.ready(function() { //设置默认值 ue.setContent('默认值....' ...

  2. Linux命令cut

    原文 cut 文件内容查看 显示行中的指定部分,删除文件中指定字段 显示文件的内容,类似于下的type命令. 说明 该命令有两项功能,其一是用来显示文件的内容,它依次读取由参数file所指明的文件,将 ...

  3. mybatis返回map类型数据空值字段不显示的解决方法

    在日常开发中,查询数据返回类型为map,数据库中有些自动值为null,则返回的结果中没有值为空的字段,则如何显示值为空的字段呢? Spring boot + MyBatis返回map中null值默认不 ...

  4. 8.效果控件之移动&&缩放

    1.移动应用(横摇.竖摇) 1.移动应用(横向缩小跟踪排列) 1.移动应用(自由缩小跟踪排列)

  5. AspNetCore架构图

    asp,net,core  All-in-One App All-in-One applications N-Layer 典型的应用层 分层项目骨架 Clean Architecture Layers ...

  6. LOJ#2764. 「JOI 2013 Final」JOIOI 塔

    题目地址 https://loj.ac/problem/2764 题解 真的想不到二分...不看tag的话... 考虑二分答案转化为判定问题,那么问题就变成了能不能组合出x个JOI/IOI,考虑贪心判 ...

  7. 项目(二)--完成练手feed流网站开发部署

    样式需要优化,最简版,还需新增逻辑. 点击跳转 源码

  8. NET Framework 的泛型

    NET Framework 的泛型 泛型是具有占位符(类型参数)的类.结构.接口和方法,这些占位符是类.结构.接口和方法所存储或使用的一个或多个类型的占位符.泛型集合类可以将类型参数用作它所存储的对象 ...

  9. 结构型模式(二) 桥接模式(Bridge)

    一.动机(Motivation) 在很多游戏场景中,会有这样的情况:[装备]本身会有的自己固有的逻辑,比如枪支,会有型号的问题,同时现在很多的游戏又在不同的介质平台上运行和使用,这样就使得游戏的[装备 ...

  10. 3D-2D透视投影数学推导

    请尊重作者,禁止私自盗用图片!