微信小程序——地图

一：如何标点问题

地图模块需要用标点：官网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里面写地图标签

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

秒客网

微信小程序——地图

相关文章