WeChat applet - call WeChat map

question:

The WeChat applet gets the latitude and longitude of the current location, but sometimes you find that the positioning is not accurate?

Then you find that there is a problem with the location you need when calling the built-in map?

The WeChat applet can open the built-in map, but the current location name is not displayed when it is displayed?

wx.getLocation({
  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale: 28
    })
  }
})

The WeChat applet api provides an API for positioning the current location, but the API does not provide the location name after positioning. Since the applet API does not provide it, you can use third-party maps, Tencent maps, AutoNavi maps, Baidu maps... ..

Let me tell you that I am using Tencent Maps, I am afraid that there is any problem, it is better to use Tencent's own home -_-#

need:

Assuming that in a certain scenario, when the page needs to be loaded and displayed, the target location will be displayed directly in the page map display module. Click the map component to open the map navigation and then navigate to the target location through the map.

Ideas:

1. You can provide the latitude and longitude and then render the js data to the wxml page after accessing the background interface, and directly locate and display it on your page through the map component.

longitude--longitude latitude--latitude (write it here, because I have confused it~~)

<!-- map.wxml -->
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}"  markers="{{markers}}" bindtap="goMap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

As for the content of the map component, I will not talk about it one by one. If you are interested, you can go to the development documentation to see https://developers.weixin.qq.com/miniprogram/dev/component/map.html

2. Then, by requesting the background to obtain the latitude and longitude of the location specified by the background system administrator when the js page is loaded, the data is rendered to the interface map component for automatic positioning.

3. Then use Tencent Maps inverse address analysis to obtain detailed address information through detailed latitude and longitude.

Link to the official website and follow the steps yourself

http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html

const app = getApp()
var url = app.globalData.url
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');

Page({
data:{
  longitude：'',
  latitude:'',
},


goMap:function(){
  var that = this
  //逆地址解析
 // 实例化API核心类
 var demo = new QQMapWX({
    key: '开发密钥（key）' // 必填
 });

 // 调用接口
 demo.reverseGeocoder({
    location: {
        latitude: that.data.latitude,
        longitude: that.data.longitude,
    },
    success: function(res) {
    console.log(res);
 //​使用微信内置地图查看位置
 wx.openLocation({
      latitude: that.data.latitude,
      longitude: that.data.longitude,
      name:res.result.address,//地址描述
      scale: 28
    })
   },
   
 });

},

onLoad: function (res) {
  var that = this
  //发送请求
  wx.request({
      url: url + "xxx/xxx",//仅为示例接口地址
      success: function (res) {
        that.setData({
          longitude: res.data.longitude,
          latitude: res.data.latitude,
        })
      },
    })
  }
})

 

hint:

For pits encountered in development, for example, when providing latitude and longitude, you should pay attention to being precise, and you should pay attention to the different coordinates of different platforms, otherwise there will be problems with positioning.

 

The level is limited, if you have any questions, please leave a message to exchange.

Learn from each other and make progress together :) Please indicate the source for reprinting. Thank you.