wx地址和腾讯地图

标签：scope   获取位置   http   UNC   pen   rgb   number   sap   stroke   

如果只是要获取当前用户的经纬度和打开微信自带的地图
只需要

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: '' // 在查看位置界面底部显示的超链接,可点击跳转
   });
}

如果还要详细地址或者地图可以操作，需要借助百度地图，腾讯地图，高德的帮助
但是因为是微信，当然选自家的产品了

使用腾讯地图
开发文档
需要申请腾讯API的使用权，就是Key，从上面的开发文档地址进去，找到==常见问题==，点击==申请Key==，如果看不懂就赶紧回去读初中吧

引入js，目前没有本地文件，只能用cdn

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

然后查看开发文档的==示例==，复制代码测试就行
常用的功能有【创建地图，改变地图中心，地址解析，逆地址解析，点击地图事件，点击地图时只添加一个标记，向地图上添加一个圆，给圆形覆盖物绑定单击事件】

将上面的功能融合成一个能搜索，能修改位置，能获取位置，能再次定位的插件

<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);
        })
    }
}

如何使用

// 在最上面声明
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({}) })
    }
  })
}

还需要一个img文件夹，有三个图标
一个是local.svg
一个是close.svg
一个是find.png
效果图如下

wx地址和腾讯地图

标签：scope   获取位置   http   UNC   pen   rgb   number   sap   stroke   

原文地址：https://www.cnblogs.com/pengdt/p/12072480.html