<template>
	<view class="">
		<u-navbar :is-back="true" title="">
			<view class="slot-wrap">
				<text class="font-30 color-11 text-bold">苏州市</text>
				<view class="flex align-center margin-left"
					style="background-color: #F4F4F4;border-radius: 34rpx;padding: 10rpx;font-size: 28rpx;color: #999;">
					<image src="../../../static/home_search_icon.png" mode="widthFix" style="width: 30rpx;"
						class="margin-left-xs"></image>
					<input type="text" value="" v-model="keyword" placeholder="搜索地点" class="margin-left-sm font-30" />
				</view>

			</view>
		</u-navbar>

		<view class="content">
			<view id='container' style="height: 500rpx;">
			</view>
			<view class="" style="background: #F9FAFB;padding: 25rpx 75rpx;position: fixed;bottom: 0;">
				<view class="text-center color-ff sunmit-button " style="padding: 29rpx 233rpx;border-radius: 45rpx;">
					确定地址
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	//这里要加window., loadScrpit的callback才会执行
	// window.mapInit = function() {
	// 	mapObj = new AMap.Map('iCenter');

	// 	// do some thing
	// 	// 在这里可以做一些回调处理  定位 标记点 等等  或者把amap弄成一个全局变量
	// };
</script>

<script>
	export default {
		data() {
			return {
				keyword: '',
				lastMarker: null,
				markerList: [],
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					// iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					// iconPath: '../../../static/location.png'
				}]
			}

		},


		onLoad() {
			// // this.loadScrpit();
			// window.onLoad = function() {
			// 	console.log('++++++++++++++++++++++++')
			// 	// var map = new AMap.Map('container');

			// 	var map = new AMap.Map('container', {
			// 		zoom: 12,

			// 	})

			// 	  AMap.plugin('AMap.Geolocation', function() {
			// 	        var geolocation = new AMap.Geolocation({
			// 	            enableHighAccuracy: true,//是否使用高精度定位，默认:true
			// 	            timeout: 10000,          //超过10秒后停止定位，默认：5s
			// 	            buttonPosition:'RB',    //定位按钮的停靠位置
			// 	            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
			// 	            zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
			// 				noIpLocate:3
			// 	        });
			// 	        map.addControl(geolocation);
			// 	        geolocation.getCurrentPosition(function(status,result){
			// 				console.log(result)
			// 	            if(status=='complete'){
			// 	                onComplete(result)
			// 	            }else{
			// 	                onError(result)
			// 	            }
			// 	        });
			// 	    });
			// 	    //解析定位结果
			// 	    function onComplete(data) {
				        
			// 	    }
			// 	    //解析定位错误信息
			// 	    function onError(data) {
				       
			// 	    }
			// 	map.setCenter([120.68111, 31.31358])

			// 	var marker = new AMap.Marker({
			// 		icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
			// 		position: [120.68111, 31.31358],

			// 		// map:map
			// 	});


			// 	map.add(marker)
			// 	this.lastMarker = marker
			// 	var that = this
			// 	map.on('dragend', function(ev) {
			// 		map.remove(that.lastMarker)
			// 		var marker1 = new AMap.Marker({
			// 			icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
			// 			position: [map.getCenter().getLng(), map.getCenter().getLat()],
			// 		});
			// 		that.lastMarker = marker1
			// 		map.add(marker1)

			// 	})


			// }


			// var url =
			// 	'https://webapi.amap.com/maps?v=2.0&key=95e4b8fcaaee383d680fab0c78d78cf9&callback=onLoad';
			// var jsapi = document.createElement('script');
			// jsapi.charset = 'utf-8';
			// jsapi.src =
			// 	url;
			// document.body.appendChild(jsapi);



		},
		onShow() {

		},
		methods: {
			loadScrpit() {
				var script = document.createElement('script');
				script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=95e4b8fcaaee383d680fab0c78d78cf9';
				document.body.appendChild(script);
			}

		}
	}
</script>
<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		// flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.sunmit-button {
		background-color: #eee;
	}

	.active {
		background-color: #FC6035;
	}
</style>
