如果只是要获取当前用户的经纬度和打开微信自带的地图
只需要
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
效果图如下