微信小程序——打开地图选择位置 完整功能实现代码
在本文中，我们将详细描述如何实现一个完整的微信小程序地图选点功能。这个功能包括：
1. 默认地位显示地图2. 地图定位（获取当前位置）
3. 检索周边（搜索附近的地点或店铺）
4. 可移动选点（选择店铺位置）
5. 可搜索（输入关键字搜索地点或店铺）
依赖库
为了实现这些功能，我们将使用以下依赖库：
* `wx.map`：微信小程序地图组件* `tcb-map`：腾讯地图API代码结构
我们的代码结构如下：
```markdown小程序目录|—— pages| |—— index| |—— index.js| |—— index.wxml| |—— index.wxss|—— utils| |—— mapUtil.js|—— app.json```
index.js
```javascript// pages/index/index.jsPage({
data: {
// 地图选点的位置 location: null,
// 检索周边的结果 nearbyResults: [],
// 可移动选点的位置 movableLocation: null,
},
onLoad() {
// 初始化地图 this.initMap();
},
initMap() {
// 获取当前位置 wx.getLocation({
type: 'wgs84',
success: (res) => {
const location = res.latitude + ',' + res.longitude;
this.setData({ location });
},
});
// 初始化地图选点的位置 this.initMovableLocation();
},
initMovableLocation() {
// 获取当前位置 wx.getLocation({
type: 'wgs84',
success: (res) => {
const location = res.latitude + ',' + res.longitude;
this.setData({ movableLocation: location });
},
});
},
onSearch(e) {
// 检索周边 const keyword = e.detail.value;
tcbMap.search({
keyword,
success: (res) => {
const nearbyResults = res.results;
this.setData({ nearbyResults });
},
});
},
onSelectLocation(e) {
// 可移动选点 const location = e.detail.value;
this.setData({ movableLocation: location });
},
});
```
index.wxml
```wxml
{{nearbyResults}}
{{/nearbyResults}}
value="{{movableLocation}}"
bind:input="onSelectLocation"
/>
```
index.wxss
```wxss/* pages/index/index.wxss */
map {
width:100%;
height:300px;
}
```
utils/mapUtil.js
```javascript// utils/mapUtil.jsexport function getMapLocation() {
return new Promise((resolve, reject) => {
wx.getLocation({
type: 'wgs84',
success: (res) => {
const location = res.latitude + ',' + res.longitude;
resolve(location);
},
fail: (err) => {
reject(err);
},
});
});
}
```
app.json
```json{
"pages": [
"index"
],
"dependencies": {
"tcb-map": "^1.0.0"
}
}
```
以上就是完整的微信小程序地图选点功能实现代码。
