微信小程序——地图

一：如何标点问题

地图模块需要用标点：官网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" bindregiοnchange="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

转载于:https://www.cnblogs.com/huangxiaowen/p/8917046.html