wx address and Tencent map

If you just want to get the current user's latitude and longitude and open micro-channel built-in map
needs only

jsApiList: ["getLocation","openLocation"]

// 先获得
wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    var speed = res.speed; // 速度，以米/每秒计
    var accuracy = res.accuracy; // 位置精度
    // 通过获得的经纬度打开地图
    openMap(longitude,latitude)
  }
});

function openMap(lng,lat){
   wx.openLocation({
     latitude: 0, // 纬度，浮点数，范围为90 ~ -90
     longitude: 0, // 经度，浮点数，范围为180 ~ -180。
     name: '', // 位置名
     address: '', // 地址详情说明
     scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
     infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
   });
}

If you have the full address or a map, you need map help Baidu, Tencent map, high moral help
, but because it is a micro-letters, of course, selected from a family of products

Use the map Tencent
development documentation
required to apply for the right to use Tencent API, is the Key, to go from the above address development documents, frequently asked questions to find == == == click application Key ==, if you can not read it quickly back to junior high school

Introducing js, currently there is no local file, can only be usedcdn

//YOUR_KE 就是申请到的Key
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

And then view the development of the document == == example, copy the code on the line test
commonly used functions [create a map, changing the center of the map, geocoding, reverse geocoding, the event click on the map, just click on the map to add a mark, to add to the map a circular, circular cover to bind the click event]

The above functions can be integrated into a search, to modify the location, you can get location, to reposition the plug

<div id="mapBox" style="display: none;"></div>
<div id="nowPlace">正在定位...</div>
<div id="getPlace">不准确? 重新定位</div>

#mapBox{
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 100;
   background-color: white;
}

function wxGetLocation(cb,getSuccess) {
    //alert('进入了wxGetLocation')
    if(arguments.length==2){
        //alert('arguments.length')
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'  | wgs84
            success: function (res) {
                //alert("185"+JSON.stringify(res))
                // console.log('获得了wxGetLocation的res')
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                // 把经纬度传给腾讯地图获得准确地点，微信是没提供准确地点的api的
                cb(res,getSuccess)
            },
            error:function (res) {
                // console.log('wx.getLocation报错'+JSON.stringify(res));
            }
        });
    }
}

function qqMapGetPlace(res,getSuccess) {
    //alert('进入了qqMapGetPlace')
    geocoder = new qq.maps.Geocoder({
        complete : function(result){
            //alert('获得了qqMapGetPlace的result')
            getSuccess(result)
        }
    });
    var latLng = new qq.maps.LatLng(res.latitude,res.longitude);
    geocoder.getAddress(latLng);
}

function qqMapOpen(loc,opt) {
    var newloc = "";
    var marker = "";
    var zoom = opt.zoom || 15;
    var now = new Date().getTime();
    var domId = 'map_'+ now;
    var str = `<div id="${domId}" style="width:${opt.width};height:${opt.height};"></div><div id="btnGroup_${now}" style="position: fixed;width: 10%;bottom: 0;right: 0;"></div>`;
    $('#'+opt.id).append(str);
    map = new qq.maps.Map(document.getElementById(domId), {
        center: new qq.maps.LatLng(loc.lat,loc.lng),      // 地图的中心地理坐标。
        zoom:zoom                                                 // 地图的中心地理坐标。
    });
    marker=new qq.maps.Marker({
        position: loc,
        map:map
    });
    // 添加返回页面的功能
    var str = `<img id="close_${now}" src="img/close.svg" style="width:100%;background-color: white;border-radius: 50%;"/> `;
    $('#btnGroup_'+now).append(str);
    $('#close_'+now).click(function () {
        if(opt.onClose){
            opt.onClose($('#map_'+now)[0],newloc)
        }
    })
    //添加可以修改位置的功能
    if(opt.isChange){
        if(opt.radius){
            var changeScopeLat = opt.changeScopeLat || loc.lat;
            var changeScopeLng = opt.changeScopeLng || loc.lng;
            var circle=new qq.maps.Circle({
                map:map,
                center:new qq.maps.LatLng(changeScopeLat,changeScopeLng),
                radius:opt.radius,
                strokeWeight:1
            });
            qq.maps.event.addListener(circle,"click",function(event){
                newloc = event;
                if(marker){
                    marker.setMap(null);
                }
                marker=new qq.maps.Marker({
                    position:event.latLng,
                    map:map
                });
            });
        }else{
            //添加监听事件   获取鼠标单击事件
            qq.maps.event.addListener(map, 'click', function(event) {
                newloc = event;
                if(marker){
                    marker.setMap(null);
                }
                marker=new qq.maps.Marker({
                    position:event.latLng,
                    map:map
                });
            });
        }

        // 添加回到原点的功能
        var str = `<img id="return_${now}" src="img/local.svg" style="width:100%;background-color: white;border-radius: 50%;"/> `;
        $('#btnGroup_'+now).prepend(str);
        $('#return_'+now).click(function () {
            map.setCenter(loc);
            map.zoomTo(zoom);
            if(marker){
                marker.setMap(null);
                marker=new qq.maps.Marker({
                    position:loc,
                    map:map
                });
            }
        })
    }

    //添加搜索框
    if(opt.isFind){
        var str = `<div style="position: fixed;width: 100%;top: 0; left:0; background-color: #f0f0f0;display: flex;align-items: center;z-index: 1;padding: 0.5rem;">
                   <div style="flex: 1">
                      <input  id="inp_${now}" type="text" style="width: 100%;padding:0.4rem;border:1px solid rgb(200,200,200);border-radius:0.2rem;" placeholder="输入详细地址">
                   </div>
                   <img id="find_${now}" src="img/find.png" alt="" style="width:1rem;margin-left: 0.5rem;">
                   </div> `;
        $('#map_'+now).append(str);
        findGeocoder = new qq.maps.Geocoder({
            complete : function(result){
                map.zoomTo(zoom);
                map.setCenter(result.detail.location);
            }
        });
        $('#find_'+now).click(function () {
            var val = $('#inp_'+now).val().trim()
            findGeocoder.getLocation(val);
        })
    }
}

how to use

// 在最上面声明
var locat = {}
var firstPlace = {}

wx.ready(function(){
   getPlace({first:1})
})

function getPlace(opt){     
   wxGetLocation(qqMapGetPlace,function (res) {
      locat = res.detail.location;  //根据点击会发生改变
      firstPlace = {
      latitude:locat.lat,
      longitude:locat.lng
       };  //不重新获取是不变的
       var addressComponents = res.detail.addressComponents;
       var str = addressComponents.province+addressComponents.city+addressComponents.district+addressComponents.street+addressComponents.streetNumber;
       locat.address = str;
       $('#nowPlace').html(str);
       if(opt.first){
       $('#nowPlace').click(function () {
         qqMapOpen(locat,{
        'id':'mapBox',
        'width':'100%',
        'height':'100%',
        'isChange':true,
        'isFind':true,
        'radius':50,
        'zoom':18,
        'changeScopeLat':firstPlace.latitude,
        'changeScopeLng':firstPlace.longitude,
         onClose:function (p,newloc) {
            $(p).remove();
            $('#mapBox').hide()
            if(newloc){
            locat = newloc.latLng;
            qqMapGetPlace({latitude:locat.lat,longitude:locat.lng},function (newPlace) {
                locat.address = newPlace.detail.address;
                $('#nowPlace').html(newPlace.detail.address);
            })
           }
            }
         })
         $('#mapBox').show()
       })
       $('#getPlace').click(function () { getPlace({}) })
    }
  })
}

Also need an img folder, there are three icons
a local.svg is
a close.svg is
one find.png
effect diagram below