This is the first day of my participation in Gwen Challenge
In the Tencent ecological development process, including in the micro channel small program development, can not avoid the use of Tencent sent Tencent gift package, from wechat pay to Tencent map, one-stop Tencent gift package, have to say that the strength of goose factory is incomparable. But then again, the official API of goose factory is really dare not flatter, especially the development document of micro channel small program, if not familiar with it, it is really a pit constantly, serial pit constantly, unable to ridicule.
This blog post said that wechat small program development integration Tencent map function, although the wechat official API introduced the integration steps, but will still bring a sense of cloud in the fog to xiao Bai, next on the specific integration steps, to share, if there is something wrong, please correct.
In fact, micro channel small program can also integrate baidu map, but here is no longer introduced other home map integration into micro channel small program steps. This case directly the small program map part of the package, with the form of components to call, easy to use, easy to understand. It is better to go directly to the code, as shown below.
I. Implementation of MAP components
1. Homemap.js file
const app = getApp() Component({ properties: { position: { type: Array, value: [], }, markers: { type: Array, value: [], }, markerList: { type: Array, value: [] }, getCurrentElement: { type: Function, value: function () { } } }, data: { position: [], markerList: {}, markers: [] }, ready: function () { const mapContext = wx.createMapContext('map') const { position, markers, markerList } = this.properties; this.setData({ position, markers, markerList, }); MapContext. MoveToLocation ({longitude: 114.54286, latitude: Complete (e) {console.log('moveToLocation', e)}})}, methods: { markertap({ markerId }) { let { markerList } = this.properties; markerList && markerList.map((item, idx) => { if (item.id === markerId) { item.num = markerList.length; This.triggerevent ('onMarker', item) // Pass parameters to parent component}})}},})Copy the code
2. Home Map.json file
{
"component": true
}
Copy the code
3. Home Max. WXML file
<map id="map"
longitude="{{position[0]}}"
latitude="{{position[1]}}"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
markerList="{{markerList}}"
enable-zoom="true"
bindmarkertap="markertap"
polyline="{{polyline}}"
scale="11"
style="width: 100%; height: 100%;" >
</map>
Copy the code
4. Home Max. WXSS file
This file does no operation
Call the map component implementation
Where you need to use a map, call the Map component as follows:
1. The home.js file
Page({data: {markerPorts: [], // position: [], // map center position parkMark: {}}, onReady: Function () {let url = 'ec/me/pag-space/list' const params = {pageNum: 1, } homeParkList(url, params).then(({ code, data, msg }) => { if (code === "200") { const { records, list } = data this.setData({ records: records }) const markers = []; // Marker set const marker = {'0': "/images/ green_market.png ", '1': "/images/ red_market.png ", '2': "/images/yellow_marker.png", 'def': ForEach (res => {id, longitude, longitude, parkingStatus, const {id, longitude, longitude, parkingStatus, } = res markers.push({ id, latitude, longitude, iconPath: marker[parkingStatus], width: 30, height: 30 }) }) wx.chooseLocation({ complete: e => { markers.push({ id: 9999, latitude: this.data.position[0], longitude: this.data.position[1], iconPath: marker['def'], width: 30, height: 30 }) this.setData({ position: [e.longitude, e.latitude], markerPorts: markers, markerList: list }) } }) } }) }, getMarkerInfo(e) { if (e.toString() === '[object Object]') { this.setData({ parkInfo: e.detail }) } }, })Copy the code
2. Home. json file
{ "component": true, "usingComponents": { "component":".. /.. /home Max "// home Max"Copy the code
3. The home. WXML file
<view class="page"> <view class='content'> <component class="map-comp" position="{{position}}" markers="{{markerPorts}}" markerList="{{markerList}}" bind:onMarker="getMarkerInfo" bind:aaa="bb" /> </view> </view>Copy the codeThe effect diagram of the specific implementation is as follows:
