|
|
|
<!doctype html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport"
|
|
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
|
|
|
|
<title></title>
|
|
|
|
<script src="../../assets/js/fontsize.js"></script>
|
|
|
|
<link rel="stylesheet" href="../../assets/css/api.css"/>
|
|
|
|
<!--<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>-->
|
|
|
|
<link rel="stylesheet" href="../../assets/icon/iconfont.css">
|
|
|
|
<script src="../../assets/js/fontsize.js"></script>
|
|
|
|
<link rel="stylesheet" href="../../assets/css/weui.min.css">
|
|
|
|
<link rel="stylesheet" href="../../assets/css/api.css" />
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
|
|
|
|
<style type="text/css">
|
|
|
|
body {
|
|
|
|
padding-bottom: 1rem;
|
|
...
|
...
|
@@ -81,7 +86,6 @@ |
|
|
|
.position {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.position span {
|
|
...
|
...
|
@@ -122,15 +126,18 @@ |
|
|
|
border-bottom: 1px solid #f2f2f2;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="loadStart"></div>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<div id="loadStart"></div>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
|
|
|
|
<div id="container"></div>
|
|
|
|
<div class="city_top">
|
|
|
|
<div class="city_name_box" @click="choose_city_fun">
|
|
|
|
<span class="iconfont icon-dizhi"></span>
|
|
|
|
<div class="clamp1">{{cityname}}</div>
|
|
|
|
</div>
|
|
|
|
</div>:
|
|
|
|
<div class="city_input"><input type="search" placeholder="请输入你的服务地址" v-model="keyword" @input="getCity"></div>
|
|
|
|
<div class="main_color" @click="search_word">搜索</div>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -142,38 +149,59 @@ |
|
|
|
<div class="my_address">
|
|
|
|
<div class="address_title"><span class="iconfont icon-shouye"></span><span> 我的服务地址</span></div>
|
|
|
|
<div class="address_item nodata" v-if="user_address_list.length==0">暂无服务地址</div>
|
|
|
|
<div class="address_item" v-for="(item,index) in user_address_list"
|
|
|
|
@click="choose_address(item.address,item.address_info,item.lon,item.lat)" v-else>
|
|
|
|
<div class="address_item" v-for="(item,index) in user_address_list" @click="choose_address(item.address,item.address_info,item.lon,item.lat)" v-else>
|
|
|
|
<span>{{item.address}}{{item.address_info}}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="my_address">
|
|
|
|
<div class="address_title"><span class="iconfont icon-dizhi"></span><span>我的附近地址</span></div>
|
|
|
|
<div class="address_item" v-for="(item,index) in nearList"
|
|
|
|
@click="choose_address(item.address,'',item.lon,item.lat)">
|
|
|
|
<div class="address_item" v-for="(item,index) in nearList" @click="choose_address(item.address,'',item.lon,item.lat)">
|
|
|
|
<span>{{item.address}}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-for="(item,index) in keywords" class="city_item"
|
|
|
|
@click="choose_address(item.address,item.name,item.lon,item.lat)" v-else>
|
|
|
|
<div v-for="(item,index) in keywords" class="city_item" @click="choose_address(item.address,item.name,item.lon,item.lat)" v-else>
|
|
|
|
<div>
|
|
|
|
<div class="city_name">{{item.name}}</div>
|
|
|
|
<div class="city_address">{{item.address}}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|
|
|
|
<!--<script src="https://webapi.amap.com/maps?v=1.4.8&key= ef53760bd959a4df08b7d4587280e642"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var map = new AMap.Map('container', {
|
|
|
|
center:[117.000923,36.675807],
|
|
|
|
zoom:11
|
|
|
|
});
|
|
|
|
</script>-->
|
|
|
|
<script>
|
|
|
|
var map = {}
|
|
|
|
window.onLoad = function() {
|
|
|
|
map = new AMap.Map('container');
|
|
|
|
}
|
|
|
|
var url = 'https://webapi.amap.com/maps?v=1.4.8&key=ef53760bd959a4df08b7d4587280e642&callback=onLoad';
|
|
|
|
var jsapi = document.createElement('script');
|
|
|
|
jsapi.charset = 'utf-8';
|
|
|
|
jsapi.src = url;
|
|
|
|
document.head.appendChild(jsapi);
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/weui.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/api.js"></script>
|
|
|
|
<script ty></script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/public.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
|
|
|
|
<script>
|
|
|
|
new FastClick(document.body);
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
|
|
|
|
<script type="text/javascript" src="https://cache.amap.com/lbs/static/PlaceSearchRender.js"></script>
|
|
|
|
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
|
|
|
|
<script>
|
|
|
|
var app = new Vue({
|
|
|
|
el: '#app',
|
|
...
|
...
|
@@ -189,135 +217,170 @@ |
|
|
|
user_address_list: [],
|
|
|
|
address_show: true,
|
|
|
|
latitude: '',
|
|
|
|
longitude: ''
|
|
|
|
longitude: '',
|
|
|
|
//经度
|
|
|
|
lng: '',
|
|
|
|
|
|
|
|
//纬度
|
|
|
|
lat: '',
|
|
|
|
map: {},
|
|
|
|
//经纬度
|
|
|
|
centerPoint: []
|
|
|
|
},
|
|
|
|
created: function () {
|
|
|
|
apiready = function () {
|
|
|
|
api.setFrameAttr({
|
|
|
|
name: 'choose_address',
|
|
|
|
bounces: true
|
|
|
|
});
|
|
|
|
app.getNearBy();
|
|
|
|
app.cityname = getcity() ? getcity() : api.pageParam.cityname;
|
|
|
|
api.addEventListener({
|
|
|
|
name: 'city'
|
|
|
|
}, function (ret, err) {
|
|
|
|
// alert(JSON.stringify(ret));
|
|
|
|
app.cityname = ret.value.city;
|
|
|
|
});
|
|
|
|
app.getUsedAddress();
|
|
|
|
created: function() {
|
|
|
|
loadEnd();
|
|
|
|
apiready = function() {
|
|
|
|
app.get_city();
|
|
|
|
app.getUsedAddress()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// app.getNearBy();
|
|
|
|
// app.cityname = getcity() ? getcity() : api.pageParam.cityname;
|
|
|
|
// api.addEventListener({
|
|
|
|
// name: 'city'
|
|
|
|
// }, function (ret, err) {
|
|
|
|
// // alert(JSON.stringify(ret));
|
|
|
|
// app.cityname = ret.value.city;
|
|
|
|
// });
|
|
|
|
// app.getUsedAddress();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 获取我的服务地址
|
|
|
|
getUsedAddress: function () {
|
|
|
|
getUsedAddress: function() {
|
|
|
|
var header = {
|
|
|
|
"XX-Device-Type": getDevice(),
|
|
|
|
'XX-Token': getToken()
|
|
|
|
};
|
|
|
|
getRequest('post', 'portal/Goods/getUsedAddress', null, header).then(function (res) {
|
|
|
|
// alert(JSON.stringify(res));
|
|
|
|
if (res.data.code == 1) {
|
|
|
|
console.log(header)
|
|
|
|
getRequest('post', 'portal/Goods/getUsedAddress', null, header).then(function(res) {
|
|
|
|
//alert(JSON.stringify(res));
|
|
|
|
if(res.data.code == 1) {
|
|
|
|
app.user_address_list = res.data.data;
|
|
|
|
} else {
|
|
|
|
toastMsg(res.data.msg)
|
|
|
|
}
|
|
|
|
loadEnd();
|
|
|
|
})
|
|
|
|
},
|
|
|
|
// 重新获取当前定位信息
|
|
|
|
choose_now: function () {
|
|
|
|
api.showProgress({
|
|
|
|
title: '正在重新定位',
|
|
|
|
text: '定位中...',
|
|
|
|
modal: true
|
|
|
|
});
|
|
|
|
app.getNearBy();
|
|
|
|
choose_now: function() {
|
|
|
|
|
|
|
|
toastMsg('正在重新定位')
|
|
|
|
app.get_city()
|
|
|
|
setTimeout(function() {
|
|
|
|
api.hideProgress();
|
|
|
|
// api.hideProgress();
|
|
|
|
}, 2000)
|
|
|
|
},
|
|
|
|
|
|
|
|
// 定位当前城市
|
|
|
|
get_city: function() {
|
|
|
|
|
|
|
|
app.map = new AMap.Map('container', {});
|
|
|
|
app.map.plugin('AMap.Geolocation', function() {
|
|
|
|
var geolocation = new AMap.Geolocation({
|
|
|
|
// 是否使用高精度定位，默认：true
|
|
|
|
enableHighAccuracy: true,
|
|
|
|
// 设置定位超时时间，默认：无穷大
|
|
|
|
timeout: 10000,
|
|
|
|
});
|
|
|
|
geolocation.getCurrentPosition();
|
|
|
|
AMap.event.addListener(geolocation, 'complete', onComplete)
|
|
|
|
AMap.event.addListener(geolocation, 'error', onError)
|
|
|
|
|
|
|
|
function onComplete(data) {
|
|
|
|
// console.log(JSON.stringify(data));
|
|
|
|
|
|
|
|
app.cityname = data.addressComponent.province;
|
|
|
|
console.log(app.cityname);
|
|
|
|
app.lng = data.position.lng;
|
|
|
|
app.lat = data.position.lat;
|
|
|
|
// console.log(app.lng);
|
|
|
|
// console.log(app.lat);
|
|
|
|
//
|
|
|
|
// 获取附近地址
|
|
|
|
getNearBy: function () {
|
|
|
|
var aMap = api.require('aMap');
|
|
|
|
aMap.open({
|
|
|
|
rect: {
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
w: 0,
|
|
|
|
h: 0
|
|
|
|
},
|
|
|
|
}, function (ret, err) {
|
|
|
|
if (ret.status) {
|
|
|
|
aMap.getLocation(function (ret_loc, err_loc) {
|
|
|
|
if (ret_loc.status) {
|
|
|
|
aMap.getNameFromCoords({
|
|
|
|
lon: ret_loc.lon,
|
|
|
|
lat: ret_loc.lat
|
|
|
|
}, function (ret_city, err_city) {
|
|
|
|
if (ret_city.status) {
|
|
|
|
app.getName(ret_loc.lon, ret_loc.lat);
|
|
|
|
app.street = ret_city.street;
|
|
|
|
// app.cityname=ret.
|
|
|
|
aMap.searchNearby({
|
|
|
|
keyword: ret_city.street,
|
|
|
|
lon: ret_loc.lon,
|
|
|
|
lat: ret_loc.lat,
|
|
|
|
radius: 1000,
|
|
|
|
offset: 20,
|
|
|
|
page: 1,
|
|
|
|
sortrule: 0
|
|
|
|
}, function (ret_near, err_near) {
|
|
|
|
if (ret_near.status) {
|
|
|
|
app.nearList = ret_near.pois.slice(0, 10);
|
|
|
|
}
|
|
|
|
loadEnd();
|
|
|
|
app.map = new AMap.Map('container', {});
|
|
|
|
AMap.service(["AMap.PlaceSearch"], function() {
|
|
|
|
var placeSearch = new AMap.PlaceSearch({
|
|
|
|
pageSize: 10, // 每页10条
|
|
|
|
pageIndex: 1, // 获取第一页
|
|
|
|
city: app.cityname // 指定城市名(如果你获取不到城市名称，这个参数也可以不传，注释掉)
|
|
|
|
});
|
|
|
|
|
|
|
|
// 第一个参数是关键字，这里传入的空表示不需要根据关键字过滤
|
|
|
|
// 第二个参数是经纬度，数组类型
|
|
|
|
// 第三个参数是半径，周边的范围
|
|
|
|
// 第四个参数为回调函数
|
|
|
|
|
|
|
|
placeSearch.searchNearBy(app.cityname, [app.lng, app.lat], 1000, function(status, result) {
|
|
|
|
|
|
|
|
console.log(JSON.stringify(status))
|
|
|
|
if(result.info === 'OK') {
|
|
|
|
var locationList = result.poiList.pois; // 周边地标建筑列表
|
|
|
|
//console.log(JSON.stringify(locationList))
|
|
|
|
app.nearList = locationList // 生成地址列表html
|
|
|
|
// createLocationHtml(locationList);
|
|
|
|
} else {
|
|
|
|
toastMsg(JSON.stringify(err_city));
|
|
|
|
console.log('获取位置信息失败!');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
|
|
toastMsg(JSON.stringify(err_loc));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
toastMsg(JSON.stringify(err));
|
|
|
|
|
|
|
|
function onError(erro) {
|
|
|
|
// 定位出错
|
|
|
|
toastMsg('请开启定位功能')
|
|
|
|
}
|
|
|
|
});
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
// 获取搜索地址
|
|
|
|
getCity: function () {
|
|
|
|
if (app.keyword == '') {
|
|
|
|
getCity: function() {
|
|
|
|
if(app.keyword == '') {
|
|
|
|
app.address_show = true;
|
|
|
|
} else {
|
|
|
|
app.address_show = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
var aMap = api.require('aMap');
|
|
|
|
aMap.searchInCity({
|
|
|
|
city: app.cityname,
|
|
|
|
keyword: app.keyword,
|
|
|
|
offset: 20,
|
|
|
|
page: 1,
|
|
|
|
sortrule: 0
|
|
|
|
}, function (ret) {
|
|
|
|
if (ret.status) {
|
|
|
|
app.keywords = ret.pois;
|
|
|
|
// alert(JSON.stringify(app.keywords))
|
|
|
|
}
|
|
|
|
var placeSearchOptions = { //构造地点查询类
|
|
|
|
pageSize: 10,
|
|
|
|
pageIndex: 1,
|
|
|
|
city: app.cityname //城市
|
|
|
|
};
|
|
|
|
var placeSearch = new AMap.PlaceSearch(placeSearchOptions);
|
|
|
|
//关键字查询，您如果想修改结果展现效果，请参考页面：https://lbs.amap.com/fn/css-style/
|
|
|
|
placeSearch.search(app.keyword, callback);
|
|
|
|
var placeSearchRender = new Lib.AMap.PlaceSearchRender();
|
|
|
|
|
|
|
|
function callback(status, result) {
|
|
|
|
locationList = result.poiList.pois
|
|
|
|
// console.log(JSON.stringify(result));
|
|
|
|
app.keywords = locationList;
|
|
|
|
|
|
|
|
if(status === 'complete' && result.info === 'OK') {
|
|
|
|
placeSearchRender.autoRender({
|
|
|
|
placeSearchInstance: placeSearch,
|
|
|
|
methodName: "search",
|
|
|
|
methodArgumments: [app.keyword, callback],
|
|
|
|
data: result,
|
|
|
|
map: map,
|
|
|
|
panel: "panel"
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
// 搜索地址
|
|
|
|
search_word: function () {
|
|
|
|
if (app.keyword == '') {
|
|
|
|
search_word: function() {
|
|
|
|
if(app.keyword == '') {
|
|
|
|
toastMsg('请输入搜索内容')
|
|
|
|
} else {
|
|
|
|
app.getCity();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 选择地址
|
|
|
|
choose_address: function (address, name, longitude, latitude) {
|
|
|
|
choose_address: function(address, name, longitude, latitude) {
|
|
|
|
api.sendEvent({
|
|
|
|
name: 'choose_city',
|
|
|
|
extra: {
|
|
...
|
...
|
@@ -331,20 +394,20 @@ |
|
|
|
closeWindow();
|
|
|
|
},
|
|
|
|
// 切换城市
|
|
|
|
choose_city_fun: function () {
|
|
|
|
choose_city_fun: function() {
|
|
|
|
api.openWin({
|
|
|
|
url: '../index/city_win.html',
|
|
|
|
name: 'city_win'
|
|
|
|
});
|
|
|
|
$api.rmStorage('city')
|
|
|
|
},
|
|
|
|
getName: function (lon, lat) {
|
|
|
|
getName: function(lon, lat) {
|
|
|
|
var aMap = api.require('aMap');
|
|
|
|
aMap.getNameFromCoords({
|
|
|
|
lon: lon,
|
|
|
|
lat: lat,
|
|
|
|
}, function (ret, err) {
|
|
|
|
if (ret.status) {
|
|
|
|
}, function(ret, err) {
|
|
|
|
if(ret.status) {
|
|
|
|
// alert(JSON.stringify(ret))
|
|
|
|
app.cityname = ret.city
|
|
|
|
} else {
|
...
|
...
|
|
