微信开放文档map
微信开放文档地图相关API

一、目标实现

显示部分地图，并在想要位置进行标点定位

二、实现过程

1.在页面wxml文件中绘制一个地图

  <view class="schools-map">  <map id="myMap" scale="15"       // 缩放级别latitude="{{latitude}}"   // 首次定位点纬度longitude="{{longitude}}"  // 首次定位点经度markers="{{markers}}"      // 标点数组show-location style="width: 100%; height:100%" ></map></view>

2.在相关js中实现该功能

第一步：接口请求获取全部特殊位置的经纬度，名称等  为res数组
第二步：新建tempMarkers数组，用于所有标点位置
第三步：根据res数组将所有标点信息进行数组转换，转换成map需要的数组形式var tempMarkers = [];res.forEach((m,index)=>{var info = {id : 0,iconPath: "/assets/blueLocation.svg",   // 标记点图片，常见有蓝色点你懂得latitude: '',            // 每一个被标点的纬度longitude: '',    // 每一个被标点的经度width: 20,   // 使用图标的宽度height: 20, // 使用图标的高度title: "",   // 点击标记点显示的title};info.id = index;info.latitude=m.latitude;info.longitude=m.longitude;info.title=m.address;tempMarkers.push(info)this.setData({latitude:curLatit,longitude:curLong,markers:tempMarkers})})

以上是在学习时看官网和各路大佬的思路组成，自己留档，也希望可以帮助到你。

补坑：

我在iconPath使用的图片为svg图片，发现在IOS中显示默认红点，在安卓手机上面什么都不显示，最后换成png图片即可解决这个问题

微信小程序——地图定位点marker相关推荐

微信小程序地图标记点marker，点击标记点显示详细信息
项目中想要实现的效果在地图上显示所有数据标点,点击显示详情信息,首先看一下图片是否符合各位的需求,在这里也是学习加深一下直接上代码: wxml: <map id="myMap&quo ...
微信小程序地图使用用户头像标记
一.在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语. 二.自己在开发时遇到的问题: 1.微信头像是网络图片,而地图的 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...

微信小程序——地图定位点marker

一、目标实现

二、实现过程

1.在页面wxml文件中绘制一个地图

2.在相关js中实现该功能

补坑：

微信小程序——地图定位点marker相关推荐

最新文章

热门文章