choose_address.html 11.3 KB

原文件审查历史永久链接

<!doctype html>
<html lang="en">

	<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 http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<!--<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;
			}

			.city_top {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.25rem;
				font-size: 0.3rem;
				color: #333;
				border: 1px solid #f5f5f5;
				background-color: #fff;
			}

			.city_name_box {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.city_name_box .iconfont {
				margin: 0 0.1rem 0 0;
			}

			.city_input {
				flex: 3;
				margin: 0 0.1rem 0 0.1rem;
				background-color: #f2f2f2;
				padding: 0 0 0 0.2rem;
				border-radius: 0.1rem;
			}

			.city_input input {
				width: 100%;
				padding: 0.2rem 0.25rem;
				color: #333;
				font-size: 0.26rem;
			}

			.city_input input::-webkit-input-placeholder {
				color: #aaa;
			}

			.city_item {
				padding: 0.3rem 0.25rem;
				color: #999;
				font-size: 0.26rem;
				display: flex;
				justify-content: space-between;
			}

			.choose_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 0.24rem;
				color: #333;
				padding: 0.2rem 0.25rem;
				border-bottom: 1px solid #f2f2f2;
				margin-top: 1.3rem;
			}

			.position {
				display: flex;
				align-items: center;
			}

			.position span {
				margin-left: 0.2rem;
			}

			.city_name {
				color: #333;
				font-size: 0.3rem;
			}

			.city_address {
				font-size: 0.26rem;
			}

			.my_address {
				margin: 0.25rem;
			}

			.my_address .iconfont {
				margin: 0 0.1rem 0 0;
				color: #ccc;
			}

			.address_title {
				font-size: 14px;
				color: #999;
			}

			.choose_city {
				font-size: 18px;
			}

			.address_item {
				color: #424242;
				font-size: 16px;
				padding: 0.26rem 0.5rem 0.26rem 0.2rem;
				border-bottom: 1px solid #f2f2f2;
			}
		</style>
	</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 class="city_input"><input type="search" placeholder="请输入你的服务地址" v-model="keyword" @input="getCity"></div>
				<div class="main_color" @click="search_word">搜索</div>
			</div>
			<div class="choose_box" @click="choose_now">
				<span class="choose_city">{{street}}</span>
				<div class="main_color position"><span class="iconfont icon-zhongxindingwei"></span><span>重新定位</span></div>
			</div>
			<div v-if="address_show">
				<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>
						<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)">
						<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>
					<div class="city_name">{{item.name}}</div>
					<div class="city_address">{{item.address}}</div>
				</div>
			</div>
		</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',
		data: {
			cityname: '',
			lat: '',
			lng: '',
			keyword: '',
			keywords: [],
			cities: [],
			street: '',
			nearList: [],
			user_address_list: [],
			address_show: true,
			latitude: '',
			longitude: '',
			//经度
			lng: '',

			//纬度
			lat: '',
			map: {},
			//经纬度
			centerPoint: []
		},
		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() {
				var header = {
					"XX-Device-Type": getDevice(),
					'XX-Token': getToken()
				};
				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;
						toastMsg(res.data.msg)
					}
					loadEnd();
				})
			},
			// 重新获取当前定位信息
			choose_now: function() {

				toastMsg('正在重新定位')
				app.get_city()
				setTimeout(function() {
//					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);
						//
						// 获取附近地址
						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 {
									console.log('获取位置信息失败!');
								}
							});
						});

					}

					function onError(erro) {
						// 定位出错
						toastMsg('请开启定位功能')
					}
				})
			},

			// 获取搜索地址
			getCity: function() {
				if(app.keyword == '') {
					app.address_show = true;
				} else {
					app.address_show = false;

					var aMap = api.require('aMap');
					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 == '') {
					toastMsg('请输入搜索内容')
				} else {
					app.getCity();
				}
			},
			// 选择地址
			choose_address: function(address, name, longitude, latitude) {
				api.sendEvent({
					name: 'choose_city',
					extra: {
						address: address,
						name: name,
						longitude: longitude,
						latitude: latitude,
						city: app.cityname
					}
				});
				closeWindow();
			},
			// 切换城市
			choose_city_fun: function() {
				api.openWin({
					url: '../index/city_win.html',
					name: 'city_win'
				});
				$api.rmStorage('city')
			},
			getName: function(lon, lat) {
				var aMap = api.require('aMap');
				aMap.getNameFromCoords({
					lon: lon,
					lat: lat,
				}, function(ret, err) {
					if(ret.status) {
						// alert(JSON.stringify(ret))
						app.cityname = ret.city
					} else {
						// toastMsg(err.code);
					}
				});
			}
		}
	})
</script>