Detailed explanation of WeChat mini program map examples-Mini Program Development-php.cn

Detailed explanation of WeChat mini program map examples

高洛峰

Release： 2017-02-15 12:46:00

Original

3731 people have browsed it

WeChat Mini Program Map (map) Example

This is the editor’s data collection of the WeChat Mini Program Map (map API), how to obtain the current address, and how to implement it You can take a look at the examples.

The module that achieves map positioning today. The simulator will definitely not be able to obtain the location. The following are the real machine test results.

Above picture:

微信小程序地图（map）实例详解

I won’t mention the longitude and latitude. For positioning, I input the numbers directly here for positioning. But there are many problems

As shown in the picture below scale is the zoom ratio. This attribute is currently invalid. The WeChat team should fix it later. After all, the public beta has just started. This means that no matter how I modify the scale, my map is always at the default zoom ratio. As shown above.

微信小程序地图（map）实例详解

rotate in markers is the rotation angle of the icon. If you need an icon parallel to the screen, set it to 0.

In addition, the icon of the overlay can be modified. Just set the path to iconPath.

Previous code:

<!--index.wxml--> 
<button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> 
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>

Copy after login

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  var markers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   name: &#39;浦东新区&#39;, 
   desc: &#39;我的位置&#39; 
  }] 
  var covers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   iconPath: &#39;../images/car.png&#39;, 
   rotate: 0 
  }] 
  this.setData({ 
   longitude: 121.47, 
   latitude: 31.23, 
   markers: markers, 
   covers: covers, 
  }) 
 } 
})

Copy after login

2.wx.getLocation(OBJECT) Get the current location API

微信小程序地图（map）实例详解

## The red box marks the longitude, latitude, speed, and accuracy

You can directly open the map using the coordinates returned by gch02.

See the documentation for the specific API
微信小程序地图（map）实例详解

##3.wx.openLocation(OBJECT) View the location

The simplest and most crude way is to give it directly Longitude and latitude positioning.

Code:

/index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  wx.getLocation({ 
   type: &#39;gcj02&#39;, 
   success: function (res) { 
    var latitude = res.latitude 
    var longitude = res.longitude 
    var speed = res.speed 
    var accuracy = res.accuracy 
    console.log("latitude:" + latitude) 
    console.log("longitude:" + longitude) 
    console.log("speed:" + speed) 
    console.log("accuracy:" + accuracy) 
    wx.openLocation({ 
     latitude: latitude, 
     longitude: longitude, 
     scale: 28 
    }) 
   } 
  }) 
 } 
})

Copy after login

Real machine test rendering:

微信小程序地图（map）实例详解