uniapp map组件多边形、标记点的坑（一） |
您所在的位置：网站首页 › 腾讯地图指南针 › uniapp map组件多边形、标记点的坑（一） |
|
最近项目用到uniapp开发微信小程序，需要在地图上展示多边形，标记点 一、地图加载id和ref最好都写，在使用 uni.createMapContext() 方法时会用到id， 类似显示指南针show-compass的属性，在真机调试中可以看到，编辑器中不显示 属性 :latitude="coordinate.lat" :longitude="coordinate.lng"地图初始化位置，不设置的话，默认在北京，可以配合uni.getLocation()使用，map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02 :scale="scale"地图显示层级 :markers="covers"标记点的属性，需要配置数组类型 :polygons="polygons"多边形，需要配置数组类型 :show-location="true"显示当前位置的小图标 方法 @markertap="markertap" @callouttap="markertap" @regionchange="regionchange"markertap标记物点击事件，callouttap气泡点击事件，regionchange视野发生变化时的事件 二、多边形配置多边形对应的对象数组就行，形式[{},{}]，注意数据加载最好放到mounted或者onReady中 示例： polygons: [{ //多边形的坐标数组 points: [{ "longitude": 100.789761, "latitude": 22.022137 }, { "longitude": 100.789833, "latitude": 22.022136 }, { "longitude": 100.790838, "latitude": 22.019582 }, { "longitude": 100.794509, "latitude": 22.020163 }, { "longitude": 100.792928, "latitude": 22.022182 }, { "longitude": 100.789761, "latitude": 22.022137 }], fillColor: "#fff",//填充颜色 strokeColor: "#DC143C",//描边颜色 strokeWidth: 2,//描边宽度 zIndex: 1,//层级 }] 三、标记点标记点跟多边形一样，加载数组就行，label的数据格式和callout类似 示例： covers: [{ latitude: 22.03556503110792, longitude: 100.81316425408939, title: '我是标题',//标题 iconPath: '../../../static/userImage/home/to.png',//标记图片，不配置的话使用默认标记 callout: {//配置气泡，配置气泡后，title会失效 content: '气泡内容', display: 'ALWAYS',//显示方式，可以配置点击或一直显示，BYCLICK点击显示 padding: '10',//文本边缘留白，文字和边界宽度 backgroundColor: "#f1f1f1"//背景颜色 } }]最后，标记点可以有点击事件，包括气泡，文本都可以设置点击事件，多边形不可以。 uniapp默认的腾讯地图，去看了腾讯地图API，可以通过js加监听方法对多变形增加点击事件，目前uniapp提供的组件暂时还不可以，有需求的同学得自己换别的方式了。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |