小程序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

原文地址:https://www.cnblogs.com/fps2tao/p/11576154.html

时间: 2024-11-02 17:27:06

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

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

1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提供的cover-view及cover-image可覆盖原生组件: 2.小程序map自定义个性化地图设置: 1)进入小程序平台,点击开发找到开发者工具,点击腾讯位置服务的查看详情,进入腾讯小程序官网,点击立即接入,选择个性化地图 2)选好地图模板,点击提交 3)复制密钥 4)在小程序map里加上复制好

小程序map多点定位显示

最近在做小程序的时候有一个类似共享单车显示附近单车的需求.查了查微信api发现api里多点定位描述的不清晰,试了试也不可以.静下心踩了几个坑后写了几个方法.分享一下??附上代码 html结构: <map id="map" scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap&quo

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

html5定位并在百度地图上显示

在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolocation.getCurrentPosition(callback); 在获取坐标成功之后会执行回调函数 callback; callback 方法的参数就是获取到的坐标点:然后可以初始化地图,设置控件.中心点.缩放等级,然后给地图添加point的overlay: var map = new BM

在地图上显示当前的位置

1 package com.aihunqin.crazy; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.view.View; 6 import android.view.View.OnClickListener; 7 import android.widget.TextView; 8 9 import com.baidu.location.BDLocation; 10 import c

46.编写程序在屏幕上显示如下图形

1 2 3 4 55 1 2 3 44 5 1 2 33 4 5 1 2 2 3 4 5 1 (1)运用循环嵌套,并设置中间变量转换 //1.新建一个数组//2.输入内容并存储//3.输出结果 #include<iostream> using namespace std; int main() { int temp; int a[5]={1,2,3,4,5}; for(int m=0;m<5;m++) { cout<<a[m]<<" "; }

小程序 map组件问题 cover-view问题

使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canvas.camera等组件都是原生组件,层级是最高的,并不能像原生开发那样使用z-index来控制层级. 从1.4.0基础库中增加了一个组件cover-view,用于在map.video.canvas.camera等原生组件上显示基础原生视图. 但是用了cover-view这个组件之后 我又发现了一个问

百度地图如何引用到自己网站,并在地图上显示企业的相关信息

步骤一: 打开下面这个地址:http://api.map.baidu.com/lbsapi/creatmap/index.html 步骤二:定位中心点 在打开的页面左侧,输入企业的详细地址,然后点查找,即可在右侧的地图中显示企业的具体位置. 步骤三:设置地图 主要是设置地图的尺寸大小,其它的按照默认即可,比如我们要调用的地图大小宽度为600像素,高度为500像素 步骤四:添加标注 这是关键的一步,点开后,我们点选那个绿色的小点图标,然后在地图上企业所在的位置点击一下,即可标注好地点,标记好了之后

微信小程序map组件z-index的层级问题

说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的,看起来没有一点问题,如下图: 但是在手机上真机模拟的时候就比较尴尬了,地图挡住了我底部的按钮,这个要怎么办呢?先是在百度上百度了好久,别人家写的博客都说,小程序的map组件是层级最高的,这个没办法处理; 然后就觉得凉凉了,不知道要怎么办了,难道要自己重新写个地图吗?感觉又不太现实,于是就问了最近在