Before we share the ability to take a look at the map position in which the applet architecture embodied in.
Applet architecture diagram
Such as yellow icons at which the ability to map a location, for example, such as the ability to call the positioning process to obtain a user's current position:
First, call the JS API wx.getLocation Interface -> map sdk calling obtain location Interface -> map sdk after the success callback -> after JS API success callback.
Return to the topic, understand the overall call flow, here we explain in detail the specific map capability.
Applet location service capability
is currently under micro letter applet, components and provides a rich API for developers to use, which provides native location services have the ability to contain the core of API and map component.
Position API
includes not only the basis of positioning API, and also provides a place to show the position of the selected API call, developers only need an API can be directly transferred from the native ability, through a very low cost to complete the appropriate development.
wx.getLocation (OBJECT)
to get the current location, speed.
Scenes
Almost any application must get the current location of the user, you should always see a prompt xxx To get your current location permit is not allowed, which is to get the current position of the security authentication prompt. Know my position can be achieved around restaurants, schools, toilets, taxis and so on a series of related peripheral scene.
Sample code:
wx.getLocation({
type: 'gcj02',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})
1
2
3
4
5
6
7
8
9
wx.chooseLocation(OBJECT)
打开地图选择位置
Scenes
Select a location to quickly fill in the delivery address when shopping, choose another location to set a take-away, usually on the way home booked in advance, you can just eat at home. Before going traveling we have to choose accommodation Attractions and so can not do without the other is a scene you want to select the location.
effect
Sample code:
wx.chooseLocation ({
Success: function (RES) {
var = Latitude res.latitude
var longitude = res.longitude
var name = res.name
var = res.address address
},
Cancel: function () {
the console.log ( 'cancellations ')
},
fail: function () {
the console.log (' failed ');
}
})
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
Note: If the point in the election and the map is selected by dragging the first is the default, it is likely success callback name field is empty, because the subject of this point does not necessarily correspond to the POI, the first non-content list was to retrieve the longitude and latitude around the current point poi , so in addition there are other first names, we use the time of the need to take note.
POI (Point of Interest, points of interest). In the map expression, a POI may represent a building, a shop, an attraction and so on.
wx.openLocation (OBJECT)
using a micro-channel built-in map view location.
Scenes
The scene shows a position we should often see, for example: the US group, review the details page in the store has a store locator, click into position will see a marked point on the map. Effects similar to the FIG.
effect
Code Example:
wx.openLocation ({
Latitude: 39.908683,
longitude: 116.397915,
Scale: 18 is,
name: 'Tiananmen',
address: 'Dong Cheng District external bridge',
Complete: function () {
the console.log ( 'Complete:', arguments );
}
});
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
Map assembly
components are essential components of applet for developers, the example:, map components include the following functional properties of four markers, polyline, circles, controls. Below are introduced to more than four properties. Interface details see applet Map component documentation.
map component -markers
the position of the point on the map.
Scenes
Opposing upper interface wx.openLocation (OBJECT), this interface may implement a custom display position, and a plurality of location points may also be achieved simultaneously displayed on the map. For example: around XXX show in the map form. Here that only one location, multi-point markers only argument to multiple points. Later example involves, not go into here.
effect
The sample code
// wxml 结构
<view class="container">
<map bindtap="tap" class="map-container" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}"></map>
<view class="marker-info">
<text class="title weui-fs-17">{{markers[0].title}}</text>
<text class="address weui-fs-14 weui-fc-grey">{{markers[0].address}}</text>
</view>
</view>
1
2
3
4
5
6
7
8
// js 代码
/**
* 通过组件自定义marker
*/
var app = getApp()
Page({
data: {},
onReady: function () {
this.setData({
latitude: 39.984060,
longitude: 116.307520,
markers: [{
the above mentioned id: 100,
Latitude: 39.984060,
longitude: 116.307520,
title: 'China Technology Exchange Center',
address: 'North Fourth Ring Road, Haidian District, Beijing, No. 66',
iconPath: '/images/home_press.png '
}]
});
}
})
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
NOTE: map of longitude, latitude coordinates of the center point to be consistent with the data markers so that the position of the point to mark the center of the map view.
map -polyline assembly
line drawing, a series of designated coordinate points, the first connection from the array to the last one.
Scenes
Locus drawing trajectory to share, experience sharing and other related road route functions.
effect
The sample code
// WXML
<map id="map" markers="{{markers}}" class="map-container" include-points="{{includePoints}}" polyline="{{lines}}" longitude="{{longitude}}" latitude="{{latitude}}"></map>
// JS 这里只贴一下代码结构
latitude: 39.984519,
longitude: 116.307793,
includePoints: [{
latitude: 39.984519,
longitude: 116.307793
}, ...],
lines: [{
points: [{
latitude: 39.984519,
longitude: 116.307793
},...],
color: "#5c95e6FF",
width: 8,
dottedLine: false
}],
markers: [{
latitude: 39.984519,
longitude: 116.307793,
iconPath: '/images/marker.png',
width: 20,
height: 30
}, {
Latitude: 39.965938,
longitude: 116.307793,
iconPath: '/images/marker.png',
width: 20 is,
height: 30
}]
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
27
28
29
30
31 is
Note: include-points property is all the points to display the visible region, but if not set the center point latitude, longitude will not exhibit a problem in the field of view, development Note that if desired, include-points property can be set by calculating the maximum of all points rectangle lower left upper right latitude & longitude, this can reduce the data setData. Since the data transmission setData small program has a limit of 1M.
map components -circles
scene
Within a certain range XXX surrounding the display, showing the distribution range of take-away, such as: the surrounding 1000 meters have no toilets, this hotel room and other areas.
effect
The sample code
// wxml
<map id="map" bindtap="onMapTap" longitude="{{longitude}}" latitude="{{latitude}}" class="map-container" circles="{{circles}}" ></map>
// js代码
var map;
Page({
data: {
latitude: 40.118246,
longitude: 116.430135,
circles: [{
latitude: 40.118246,
longitude: 116.430135,
radius: 2000,
fillColor: '#0079ffa0',
color: '#000000ff',
strokeWidth: 2
}]
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
map components -controls
scene
The main scene interact in the map below to return to the current location, for example, click on the bottom right of the map controls execution Back to the current location. Of course, it can be replaced with hotels, dining, and entertainment.
effect
Sample Code
var map;
Page({
data: {},
onReady: function () {
console.log('map实例', map);
if (!map) {
map = wx.createMapContext('map');
}
var info = wx.getSystemInfoSync();
this.setData({
controls: [{
id: 1,
position: { left: info.windowWidth - 70, top: info.windowHeight - 70, width: 50, height: 50 },
clickable: true,
iconPath: '/images/location.png'
}]
});
},
/ **
* Controls Click handler
* /
onControlclick: function (E) {
Switch (e.controlId) {
Case. 1: {
map.moveToLocation ();
}
}
}
})
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
27
28
29
30
31 is
32
33 is
NOTE: use when setting up the control position wx.getSystemInfoSync () windowWidth returned interface logic high windowHeight width positioning. Click handler controls need to distinguish the corresponding id e.controlId processed by the control settings.
wx.createMapContext (mapId)
Creates and returns a map context mapContext objects, including methods getCenterLocation, moveToLocation, control sample has been involved in it illustrates, see the applet wx.createMapContext (mapId) API documentation.
Map applet application examples
in conjunction with the map ability to share an example to find the toilet.
demand
Implement a function to find the toilet, to find the toilet in the surrounding 1000 meters. And the position of the point to the toilet marked on the map. Click position corresponding to the point icon is enlarged and displayed the corresponding name, address map information below.
achieve
It is divided into three steps:
Get the current position
through the toilet search service search around the current position
mark all interaction points position and the position in the map view
results
The sample code
<view class="container">
<map id="map" class="map-container" bindmarkertap="onMarkerclick" markers="{{markers}}" show-location include-points="{{points}}" ></map>
<view class="marker-info">
<text class="title weui-fs-17">{{markers[index].title}}</text>
<text class="address weui-fs-14 weui-fc-grey">{{markers[index].address}}</text>
</view>
</view>
1
2
3
4
5
6
7
获取当前位置
// get the current position by the applet API interface wx.getLocation
wx.getLocation ({
"type": 'gcj02',
Success: function (RES) {
the console.log ( 'micro-channel positioning success:', res.latitude + ', '+ res.longitude);
},
Fail: function (RES) {
// ...
}
});
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
searches around the current location search service through 1000 toilet WebService API
= that the this var;
var URL = 'https://apis.map.qq.com/ws/place/v1/search';
wx.request ({
URL: URL,
Data: {
Key: 'HTTP: // LBS .qq.com / internet applications',
keyword: 'toilets',
address_format:' Short ',
boundary:' Available nearby ( 'LAT + +', '+ + LNG', 1000,0) '
},
Success: function (RES {)
'retrieves data:' the console.log (, res.data)
CB CB && (res.data);
}
})
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
marks all positions within the map view click on the interaction point and the position of point
/**
* 通过检索数据设置标注点
*/
addMarkers: function (data) {
var markers = [];
var points = [];
for (var i = 0; i < data.data.length; i++) {
var d = data.data[i];
var o = {};
var p = {};
p.latitude = d.location.lat;
p.longitude = d.location.lng;
o.id = i + 1;
o.latitude = d.location.lat;
o.longitude = d.location.lng;
o.title = d.title;
o.address = d.address; o.iconPath = '/images/marker.png';
o.width = 20;
o.height = 30;
markers.push(o); points.push(o); }
this.setData({
markers: markers, points: points,
index: 1
});
}
onMarkerclick: function (E) {
the console.log ( 'marker click', E);
var = Markerld e.markerId; var = this.data.markers markers; var index = 0;
for (var I = 0; I <markers .length; I ++) {
markers [I] = 20 is .width;
markers [I] .height = 30;
IF (markers [I] .id == Markerld) {
markers [I] = 30 .width;
markers [I] = 40 .height;
index = I;
}
}
this.setData ({
markers: markers, index: index
});
}
---------------------
OF: csdn Tu Min
source: CSDN
original: https: //blog.csdn.net/sinat_14921509/article/details/80127882
copyright: This article is a blogger original article, reproduced, please attach Bowen link!