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的更多相关文章

  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. Django-admin数据库记录展示调整

    Django-admin数据库记录展示调整 admin.py from django.contrib import admin from user import models # Register y ...

  2. 工业网络安全 智能电网,SCADA和其他工业控制系统等关键基础设施的网络安全(总结)

    1.工业网络的安全势必是未来安全方向必须要做的一个重要的方面 工业网络的概念:简单的说就是控制控制系统的网络,其可以进行基于网络的数字通信. 关键的基础设施:包括直接操作任何系统的设施 了解工业网络的 ...

  3. SecureCRT中文乱码解决已设置UTF-8了

    参考网址:http://www.iitshare.com/securecrt-chinese-garbled-solution.html 问题描述 SecureCRT与SecureFX的常规选项里面已 ...

  4. java读取excel的内容(可保存到数据库中)

    //** poi jar包 // public class ReadExcel { @SuppressWarnings("static-access") private stati ...

  5. 小顶堆---非递归C语言来一发

    #include <stdio.h> #include <stdlib.h> #define HEAP_SIZE 100 #define HEAP_FULL_VALUE -10 ...

  6. jmeter+python+sh执行优化报告(一)

    缘由: 1)jmeter生成的html报告容量偏大 2)jmeter生成的报告,没有历史统计 3)此外,该目录整体可以整合的自动化平台内 故:做了调整~ 一.目录结构 1)scriptPy文件夹:主要 ...

  7. 《你们都是魔鬼吗》第八次团队作业:第一天Alpha冲刺

    <你们都是魔鬼吗>第八次团队作业:Alpha冲刺 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 你们都是魔鬼吗 作业学习目标 完成最 ...

  8. 行为型模式(三) 迭代器模式(Iterator)

    一.动机(Motivate) 在软件构建过程中,集合对象内部结构常常变化各异.但对于这些集合对象,我们希望在不暴露其内部结构的同时,可以让外部客户代码透明地访问其中包含的元素:同时这种"透明 ...

  9. Spark 的两种核心 Shuffle (HashShuffle 与 与 SortShuffle) 的 的工作流程

    1. 参考博客:https://blog.csdn.net/qichangjian/article/details/88039576

  10. arp和rarp协议

    ARP与RARP详细解析 原创zlnnjit 发布于2016-04-03 15:12:15 阅读数 9544 收藏 展开 地址解析协议 ARP和逆地址解析协议RARP 1.基本关系: ​ 2.地址解析 ...