微信公众号集成百度地图api，实现收货地址选择
前端框架用的是vue，jqueryweui。
html页面：
js：
//位置
var local = null;
//地图
var map = null;
var vm = new Vue({
el:'#rrapp',
data:{
logHeight:'',
longitude:'',//经度
latitude:'', //纬度
},
methods: {
//初始化地图
map: function(){
//动态改变地址的显示的高度
vm.logHeight = $(window).height()-439;
$("#log").css("height",vm.logHeight+"px");
//地图初始化
map = new BMap.Map("allMap");
if($("#indexSearchBox").val() == null || $("#indexSearchBox").val() == ""){
map.centerAndZoom(new BMap.Point(vm.longitude,vm.latitude), 17);
}else{
map.centerAndZoom($("#indexSearchBox").val(),17);
}
//移除覆盖物
map.clearOverlays();
var options = {
onSearchComplete: function(results){
if (local.getStatus() == BMAP_STATUS_SUCCESS){
var str = "";
for (var i = 0; i < results.getCurrentNumPois(); i ++){
// s.push(results.getPoi(i).title + "-->" + results.getPoi(i).address+"-->"+results.getPoi(i).point.lat+"-->"+results.getPoi(i).point.lng+"\n");
str += "
"
"+results.getPoi(i).address+"
"
"
}
var new_point = new BMap.Point(results.getPoi(0).point.lng,results.getPoi(0).point.lat);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker);// 将标注添加到地图中
$("#log").html(str);
}
}
};
local = new BMap.LocalSearch(map, options);
if($("#indexSearchBox").val() == null || $("#indexSearchBox").val() == ""){
// 创建地理编码（地理解析器）实例
var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(vm.longitude,vm.latitude), function(result){
if (result){
local.search(result.address);
}
});
var new_point = new BMap.Point(vm.longitude,vm.latitude);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker);// 将标注添加到地图中
}
},
//搜索
searchBtn:function(){
//获取搜索框要搜索的内容
local.search($("#indexSearchBox").val());
//根据搜索框的内容，改变地图显示的中心点的位置
if($("#indexSearchBox").val() == null || $("#indexSearchBox").val() == ""){
map.centerAndZoom(new BMap.Point(vm.longitude,vm.latitude),17);
}else{
map.centerAndZoom($("#indexSearchBox").val(),17);
}
}
}
});
$(function(){
get_signature();
})
function get_signature(){
$.ajax({
type: "POST",
url: "../api/sign_url",
data: {
url:location.href.split('#')[0],
},
dataType: "json",
async:false,
contentType : "application/x-www-form-urlencoded",
success: function(r){
if(r.error=="0"){
wechat_location_config(r.appId,r.nonceStr,r.signature,r.timestamp,r.fileFsServer);
}
},
error: function (err) {
}
});
}
function wechat_location_config(appId,nonceStr,signature,timestamp,fileFsServer){
wx.config({
debug : false,
appId : appId,
timestamp : timestamp,
nonceStr : nonceStr,
signature : signature,
jsApiList : [
'scanQRCode',
'checkJsApi',
'getNetworkType',//网络状态接口
'openLocation',//使用微信内置地图查看地理位置接口
'getLocation'
]
});
wx.error(function(e) {
});
wx.ready(function() {
// 获取用户位置
wx.getLocation({
success : function(res) {
if(res.errMsg =="getLocation:ok"){
vm.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
vm.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180
//初始化地图
vm.map();
}else{
$.toast("定位失败", "text");
}
},
fail : function(res) {
$.toast("定位失败", "text");
}
});
});
}