前端框架用的是vue，jqueryweui。
html页面：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>选择地址</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
</head>
<body>
<div class="page" id="rrapp" v-cloak>
<!--搜索start -->
<div style="height:auto;">
<input type="search" id="indexSearchBox" placeholder="搜索地址" class="left">
<button id="searchBtn" @click="searchBtn">搜索</button>
</div>
<!--搜索end -->
<!--地图start -->
<div id="allMap"></div>
<!--地图end -->
<!-- 地址列表start -->
<div id="log" class="weui-cells weui-cells_radio"></div>
<!-- 地址列表end -->
</div>
</body>
</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 += "<label class='weui-cell weui-check__label' :for='"+results.getPoi(i).uid+"' οnclick='chooseAddress(\""+results.getPoi(i).title+"\",\""+results.getPoi(i).address+"\",\""+results.getPoi(i).point.lat+"\",\""+results.getPoi(i).point.lng+"\")'>"+
"<div class='weui-cell__bd'><span class='title'>"+results.getPoi(i).title+"</span><br/><span class='address'>"+results.getPoi(i).address+"</span></div>"+
"<div class='weui-cell__ft'><input required='' type='radio' class='weui-check' name='address' value='"+results.getPoi(i).uid+"' :id='"+results.getPoi(i).uid+"'>"+
"<span class='weui-icon-checked'></span></div></label>";
}
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");
}
});
});
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
