⼩程序地图控件Map的使⽤
本⽂介绍⼩程序map控件的使⽤
map为原⽣控件之⼀……
介绍完map控件之后下⾯直接来看代码怎么实现吧
和往常⼀样，这些代码贴过去就可以直接通⽤的
⾸先wxml⽂件(极简)：
<map id="map" scale="16" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" show-location longitude='{{centerX}}' latitude='{{cente rY}}' class='mapv'>
</map>
<view class='contentv'>
<image class='headimg' src='{{shop_image}}' mode='aspecFill'></image>
<view class='item_meddle_one'>{{shop_name}}</view>
</view>
.wxss⽂件：
<map id="map" scale="16" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" show-location longitude='{{centerX}}' latitude='{{cente rY}}' class='mapv'>
</map>
<view class='contentv'>
<image class='headimg' src='{{shop_image}}' mode='aspecFill'></image>
红旗<view class='item_meddle_one'>{{shop_name}}</view>
</view>
然后是.js⽂件（⾥⾯的数据集合可以使你⾃⼰接⼝返回的数据，在此我先写在⽂件⾥，下⾯会把数据⽂件也发出来）
var fileData = require('../../../utils/maplist.js')
Page({
/**
* 页⾯的初始数据
*/
data: {
showData: Data().list,
centerX: 114.4801638035,
centerY: 38.0407364515,
markers: [],
controls: [{
id: 1,
position: {
left: 0,
top: 10,
width: 40,
height: 40
},
clickable: true
}],棉靴
shop_image: "",
shop_name: "",
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
console.log('地图定位！')
let that = this
type: 'gcj02',
success: (res) => {
console.log(res)
let latitude = res.latitude;
let longitude = res.longitude;
that.setData({公务员 职位
centerX: longitude,
centerY: latitude,
})
时大漂亮个人简历
},
fail: (res) => {
}
});
},
/**
* 获取门店列表数据
*/
requestshoplist: function () {
let that = this
let markers = [];
for (let i = 0; i < that.data.showData.length; i++) {
let marker = ateMarker(that.data.showData[i]);  markers.push(marker)
}
let shopitem = that.data.showData[0]
that.setData({
markers: markers,
shop_image: shopitem.shop_image,
扁鹊见蔡桓公翻译
shop_name: shopitem.shop_name,
})
},
/**
* 创建marker对象
*/
createMarker(point) {
let marker = {
iconPath: "../../../images/dp-gl.png",
id: point || 0,
name: point.shop_name || '',
latitude: point.lat,
longitude: point.lng,
江苏211大学width: 30,
height: 30,
};
return marker;
},
/**
* 点击marker
*/
markertap: function (shopitem) {
let that = this
that.setData({
shop_image: shopitem.markerId.shop_image,      shop_name: shopitem.markerId.shop_name,    })
},
})
本地数据 maplist.js
mtData: mtData
}
var mt_data = mtData()
function mtData() {
var arr = {
list: [{
"lng": "114.45935721282069",
"shop_name": "汽车维修养护中⼼",
"shop_image": "app.hbxinguo:8085/proImage/1511943489545.jpg",      "lat": "38.00812762499023"
}, {
"lng": "114.468121",
"shop_name": "车库红旗店",
"shop_image": "app.hbxinguo:8085/proImage/1502075526147.png",      "lat": "38.0034"
}, {
"lng": "114.471768",
"shop_name": "桥西区汽车养护中⼼",
"shop_image": "app.hbxinguo:8085/proImage/1512635314849.png",      "lat": "37.999924"
}]
}
return arr
}