1. Obtain the current location (no route display)

1, the map. The XML 

1< map longitude= '{{longitudes}}' latitude= '{{latitudes}}' scale= '14'

2show-location style= "width: 100%; height: 400px;" > 

Copy the code
  • Annotation: longitude:
  • Center longitude (number), because it is real-time positioning, the specific value is defined in the JS file
  • Latitude: central latitude (number)
  • Scale: scale level (number)
  • Default: 16 Value range: 5 to 18
  • 2. An array of markers is used to show the location of markers on a map.
  • Show-location-style: displays the current registration point with direction

2, map. Js 

 1Page({

 2  / * * *

 3Initial data for the page */

 4  data: {},

 5  /** * lifecycle function -- listens for page loading */

 6  onLoad: function (options) {

 7    console.log('mapload... ');

 8    var that = this

 9    wx.getLocation({

10      type: 'wgs84'.

11      success: function (res) {

12        console.log('latitude' + res.latitude);

13        console.log('longitude' + res.longitude);

14        that.setData({

15          latitudes: res.latitude,

16          longitudes: res.longitude,

17        })

18      },

19    })

20  },

21})

Copy the code

3. Effect drawing

Two, get the current location (route display)

1, the map. The XML 

1< map longitude= '{{longitudes}}'

2latitude= '{{latitudes}}' scale= '14' show-location style= "width: 100%; height:

3400px;" polyline ='{{polyline}}' > 

Copy the code
  • Annotation: longitude:
  • Center longitude (number), because it is real-time positioning, the specific value is defined in the JS file
  • Latitude: central latitude (number)
  • Scale: scale level (number) Default: 16 Value range: 5-18
  • 2. An array of markers is used to show the location of markers on a map.
  • Show-location-style: displays the current registration point with direction
  • -Leonard: Polylines.

2, map. Js 

 1Page({

 2  /** * initial data for the page */

 3  data: {},

 4  /** * lifecycle function -- listens for page loading */

 5  onLoad: function (options) {

 6    console.log('mapload... ');

 7    var that = this

 8    wx.getLocation({

 9      type: 'wgs84'.

10      success: function (res) {

11        console.log('latitude' + res.latitude);

12        console.log('longitude' + res.longitude);

13        that.setData({

14          latitudes: res.latitude,

15          longitudes: res.longitude,

16          polyline: [{

17            points: [{

18              longitude: res.longitude, // Start point longitude

19              latitude: res.latitude // Start point latitude

20            }, {

21              longitude: 112.9388700000.// Target location longitude

22              latitude: 28.2269300000 // Latitude of target location

23              / / can search sites online latitude and longitude query: http://www.gpsspg.com/maps.htm

24              // Enter your target address in this website to get the longitude and latitude of this address

25}].

26            color: "#000000AA".// Line color

27            width: 2.// Line width

28            dottedLine: true // Whether it is a dashed line

29}].

30        })

31      },

32    })

33  }

34})

Copy the code

3. Effect drawing

3. How does the map height fill the screen

  • When you control the size of the map display area and want to display the map in full screen on the phone,
  • Using the usual px or using percentages will not work for height full screen, so you can use the unit vh,
  • The default full screen is 100vh;
  • So set the height of the map to 100vh and the width to 100%.

The original site

Blog.csdn.net/weixin_4158…