小程序map多点定位显示

标签：path   com   info   label   height   javascrip   open   显示   sch   

最近在做小程序的时候有一个类似共享单车显示附近单车的需求。查了查微信api发现api里多点定位描述的不清晰，试了试也不可以。静下心踩了几个坑后写了几个方法。分享一下??
附上代码

html结构：

<map id="map"  scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" 
latitude="{{latitude}}"
longitude ="{{longitude}}"
controls="{{controls}}" show-location bindregionchange="regionchange" style="width: 100%; height: {{view.Height}}px;"></map>

javascript：

var app = getApp();

Page({

data: {

url:‘‘,

listData: [

{

"id": 1,

"placeName": "中关村广场",

"placeImageUrl": "",

"placeOpenTime": 1505854800,

"placeCloseTime": 1505919600,

"placeAddress": "北京市海淀区中关广场",

"placeLongitude": "116.303900",

"placeLatitude": "39.976460"

}, {

"id": 2,

"placeName": "虎丘的广场",

"placeImageUrl": "",

"placeOpenTime": 1506286800,

"placeCloseTime": 1506258000,

"placeAddress": "江苏省苏州虎丘",

"placeLongitude": "120.410770",

"placeLatitude": "31.325370"

}, ],

scale:‘15‘, //缩放

Height:‘0‘,

controls:‘40‘,//中心点

latitude:‘‘,

longitude:‘‘,

markers: [],

},

onReady: function (e) {

// 使用 wx.createMapContext 获取 map 上下文

this.mapCtx = wx.createMapContext(‘myMap‘)

},

onLoad: function () {

var that = this;

that.setData({

url: app.globalData.url// 显示图片url

})

 

wx.getLocation({

type: ‘wgs84‘, //返回可以用于wx.openLocation的经纬度

success: (res) => {

that.setData({

markers: that.getSchoolMarkers(),

scale: 12,

longitude: res.longitude,

latitude: res.latitude

})

}

});

 

wx.getSystemInfo({

success: function (res) {

//设置map高度，根据当前设备宽高满屏显示

that.setData({

view: {

Height: res.windowHeight

},

})

}

})

},

controltap(e) {

this.moveToLocation()

},

getSchoolMarkers() {

 

var market = [];

 

for (let item of this.data.listData) {

let marker1 = this.createMarker(item);

market.push(marker1)

}

return market;

},

moveToLocation: function () {

this.mapCtx.moveToLocation()

},

strSub:function(a){

var str = a.split(".")[1];

str = str.substring(0, str.length - 1)

return a.split(".")[0] + ‘.‘ + str;

},

createMarker(point) {

 

let latitude = this.strSub(point.placeLatitude);

let longitude = point.placeLongitude;

let marker = {

iconPath: "../../image/banner5.jpeg",

id: point.id || 0,

name: point.placeName || ‘‘,

title: point.placeName || ‘‘,

latitude: latitude,

longitude: longitude,

label:{

x:-24,

y:-26,

content: point.placeName

},

width: 30,

height: 30

};

return marker;

}

})

 

 

小程序map多点定位显示

标签：path   com   info   label   height   javascrip   open   显示   sch   

原文地址：http://www.cnblogs.com/wjd2221/p/7772918.html