一:如何标点问题

地图模块需要用标点:官网API里面的wx.createMapContext(mapId, this)接口,且用官网Demo,小程序运行报错
此时需要在wxml里面给map标签添加属性markers="{{markers}}",且在js里面定义markers对应的id值,才可进行标点;
另外如果想要多点标记的话应采用官网组件里面的map组件,使用map标签添加属性markers="{{markers}}",且在js里面定义markers,还可自定义标点图片等更多内容

https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

在html里面写地图标签

<map id="myMap" markers="{{markers}}" bindmarkertap="markertap" show-location  controls="{{controls}}" longitude="120.19" latitude="30.26" bindregionchange="bindregionchange" bindcontroltap="bindcontroltap"/>

Page({
data: {
showDetail:false,
mapName:'',
mapAddress:'',
markers: [
{
"address": "胜利新村路南",
"createTime": "2018-04-27 14:59:14",
"distance": "0",
"id": 2828,
"latitude": "30.27066",
"longitude": "120.145778",
"name": "胜利新村",
"websiteNo": "1084021603",
"callout":{
content:'胜利胜利新村路南新村路南',
color:'#000000',
bgColor:'#ffffff', //需要6位的色值有效
fontSize:16,
borderRadius: 2,
padding:5,
display: 'BYCLICK'
}
}
],
},

设置marker即可地图上带气泡的标点

更多小程序地图功能,搜索点等

http://lbs.qq.com/qqmap_wx_jssdk/index.html

:如何定位地图中心点问题

1)想要定位地图中心点,一种是把当前定位设置为地图的中心点,这个官网API有方法

<map id="myMap" markers="{{markers}}" bindmarkertap="markertap" show-location  controls="{{controls}}"  bindregionchange="bindregionchange" bindcontroltap="bindcontroltap" scale="18" longitude="120.19" latitude="30.26"/>

moveToLocation: function () {

this.mapCtx = wx.createMapContext('myMap');
     // 将地图中心移动到当前定位点
      this.mapCtx.moveToLocation()
},

初始化执行的时候,在电脑上可以定位到,但是在手机上自动定位到大海上去了,官方论坛找到有网友反馈是接口bug,不知何时修复,所以我在map标签里直接写死了初始化定位的经纬度

当然如果是手动触发点击回到中心按钮的话是没有问题的

2)另一种是想设置固定的经纬度当做中心点,这个方法找了一圈都没有找到,但是别人家的小程序是有这功能的,所以继续探索发现

getRegion OBJECT 获取当前地图的视野范围

能搭上一点边,实验了一下成功了,传入一个值时会设置成中心点

三:搜索页想带数据到地图页

返回页面的时候数据传递方法,在传递前将数据设置到上一个页面

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面 //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
mydata: {a:1, b:2}
})

参考链接:https://www.cnblogs.com/caicaizi/p/6652103.html

微信小程序——地图的更多相关文章

  1. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

  2. 微信小程序地图开发总结

    最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个 ...

  3. 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题

    今天在做微信小程序的时候遇到这个这样的问题  需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖  ,要怎么解决这个问题  我去翻了下小程序的文档 有个cover ...

  4. 微信小程序--地图组件与api-模拟器上返回的scale 与真机上不同--bindregionchange触发图标一直闪现问题

    场景:根据地理定位获取不同地区的充电桩位置,要求 1.平移的时候,跟随坐标变化展示不同区域的坐标点信息 2.不同的缩放等级,14以下,展示聚合点数据,14以上,展示真正的站点信息: 3.点击聚合点的时 ...

  5. 微信小程序 地图地址解析

    1.微信小程序提供了几个方式,引入地图, wx.getLocation(OBJECT) 获取当前的地理位置.速度.当用户离开小程序后,此接口无法调用:当用户点击“显示在聊天顶部”时,此接口可继续调用 ...

  6. 百度地图坐标偏移,微信小程序地图偏移问题,腾讯地图坐标偏移

    解决方案: 如果用百度的地图获取的坐标点,在微信小程序内使用,就会出现偏移 算法(lat和lng是经纬度,球面坐标): To_B是转到百度,To_G是转到GCJ-02(谷歌,高德,腾讯) var TO ...

  7. 微信小程序地图模块

    微信小程序的地图模块官方提供的API比较少,详情请见   官方文档 以下为一个示例                               <!--pages/location/locati ...

  8. 微信小程序地图总结

    小程序官方的 map地图说明文档已经非常详细了,但是鉴于如果没有一个合适的使用场景,对于刚接触 map 的初级开发,看着这些繁杂又贼多的属性名和字段,外加急切的开发需求,晕头转向是不可避免的了.接下来 ...

  9. 微信小程序地图之逆地理编码

    首先说一下,我微信自带map的api中并没有相关接口可调用.文中的方法建立于高德地图.(顺便吐槽,微信开发文档相比支付宝家的显得好烂!) 最近做项目用到地图定位相关的需求,为了搞定需求看了下相关的文档 ...

随机推荐

  1. java 安装教程

    https://www.cnblogs.com/xuyangblog/p/5455381.html

  2. Linux安装jdk.18和tomcat8

    JDK1.8的安装 第一步:下载JDK1.8 1.百度搜索jdk1.8,打开属于oracle官网的搜索结果项 2.先点击接受协议选项,然后选择要下载的64位linux版本jdk,直接单击通过浏览器下载 ...

  3. Python开发【第九篇】:协程、异步IO

    协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是协程,协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切换回 ...

  4. js动态添加元素绑定事件问题

    //开始是直接普通写的绑定click事件 其中li a i 中的i是动态添加的 结果是触发不了..$("li a i").click(function () { $(this).m ...

  5. Analysis Services(SSAS) 性能优化

    1.聚合选项中添加聚合,以空间换时间提升性能. 如下图: 性能提升百分比越高,聚合数越高,生成的Cube越大,这就是以空间换时间. 2.修改SSAS服务器上的线程池配置选项.提升并发数. 通过X:\P ...

  6. php 微信自定义分享接口

    <?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appS ...

  7. css去掉滚动条

    .main-layout-side::-webkit-scrollbar { display: none; } 主要代码: ::-webkit-scrollbar {display: none;}

  8. C# 小数点后保留两位小数,四舍五入的函数及使用方法

    1 Math.Round(45.367,2) //Returns 45.37 2 Math.Round(45.365,2) //Returns 45.36 C#中的Round()不是我们中国人理解的四 ...

  9. windows -休眠

    查询服务器执行的睡眠状态 powercfg -a 开始休眠方法:手工键入如下命令: powercfg -hibernate on 命令执行之后立即就可以生效,无需要重新启动系统,再次执行“powerc ...

  10. SQL Server数据库的兼容级别

    SQL Server 是Microsoft 公司推出的关系型数据库管理系统.具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microsoft Windows 98 的膝上型电脑到运行M ...