一:如何标点问题

地图模块需要用标点:官网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

posted on 2018-04-23 11:35  小海豚Dolphins  阅读(1252)  评论(0编辑  收藏  举报