<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>添加农场位置</title>
<!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />-->
<link rel="stylesheet" href="./css/vant-ui.css">
<link rel="stylesheet" href="./css/base.css">
<style>
html,
body {
width: 100%;
/*height: 100%;*/
}
body {
font-size: 16px;
}
#container{
width: 100%;
height:3.6rem;
}
.ja_map{
position: relative;
top: 4px;
}
.ja_map .textCont{
position: absolute;
bottom: -1.8rem;
left: 0;
width: 100%;
height: 2rem;
background-color: #fff;
z-index: 999;
}
.ja_map .search{
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
width: 100%;
height: 0.5rem;
padding: 0.06rem;
box-sizing: border-box;
background-color: #eee;
z-index: 999;
}
.ja_map .search #sInput{
width: 85%;
height: 100%;
border-radius: 4px;
padding-left: 0.2rem;
box-sizing: border-box;
margin-right: 0.03rem;
border: none;
}
.ja_map .textCont ul>li{
padding: 0.1rem 0.14rem;
background-color: #fff;
/*border-top: 1px solid #ddd;*/
}
.ja_map .textCont ul>li:first-child{
color: #009685;
}
.amap_lib_placeSearch .poibox .poibox-icon,
.amap_lib_placeSearch .poibox .poi-info,
.amap_lib_placeSearch .poi-more,
.amap_lib_placeSearch_page{
display: none;
}
.amap_lib_placeSearch .poibox{
min-height: 0;
}
.amap_lib_placeSearch .poibox .poi-title{
margin-left: 0;
}
.amap-pl-pc .poi-img{
display: none;
}
</style>
<script src="./js/vue.js"></script>
<script src="./js/vant.js"></script>
</head>
<body>
<div id="app">
<div class="header"></div>
<van-nav-bar
title="添加农场位置"
left-arrow
@click-left="onClickLeft">
</van-nav-bar>
<div class="farmWrap">
<div class="ja_map">
<div class="search">
<input type="text" id="sInput" placeholder="请输入位置名称" >
<span style="color: #666;">搜 索</span>
</div>
<div id="container"></div>
<div class="textCont" id="panel"></div>
</div>
</div>
<van-popup v-model="show" close-on-click-overlay="false"><van-loading type="spinner" color="white" /></van-popup>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=Key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5*2 + 'px';//设置1rem=100px
new Vue({
el: '#app',
data:{
iphonelat:'',
iphonelng:'',
searchInfo:[],
// lon:114.30,
// lat:30.60
},
created:function(){
const toast = vant.Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '努力加载中...'
});
let second = 3;
const timer = setInterval(() => {
second--;
if (second) {
} else {
clearInterval(timer);
vant.Toast.clear();
}
}, 1200);
},
mounted() {
this.mapInit()
},
methods:{
onClickLeft(){
window.history.go(-1);
},
mapInit(){
let map = new AMap.Map('container',{
zoom:13,
// center:[this.lon,this.lat],
resizeEnable: true
});
//以下是高德获取手机的当前位置
let geolocation;
map.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, // 显示定位按钮，默认：true
buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
AMap.event.addListener(geolocation, 'error', onError); // 返回定位出错信息
});
let lat,lon,cityCode,city;
function onComplete(obj){//定位成功的回调
lat = obj.position.lat
lon = obj.position.lng
cityCode = obj.addressComponent.citycode
// 给当前的定位一个点标记实例：
var marker = new AMap.Marker({
position: new AMap.LngLat(lat, lon), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: '背景'
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
AMap.service(["AMap.PlaceSearch"], function() {
var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 5,
pageIndex: 1,
city: cityCode, //城市
map: map,
panel: "panel"
});
var cpoint = [lon, lat]; //当前定位的中心点坐标
placeSearch.searchNearBy('', cpoint, 500, function(status, result) {
if(result.info==="OK"){
//查询成功之后的回调
}
});
//监听点击panel列表时候的信息
AMap.event.addListener(placeSearch, "listElementClick", function(e){
console.log(e.data);
let transmit = JSON.parse(localStorage.getItem('transmit'))
transmit.farm.province = e.data.pname;
transmit.farm.city = e.data.cityname;
transmit.farm.district = e.data.adname;
transmit.farm.address = e.data.address;
transmit.farm.regionCode = e.data.adcode;
transmit.farm.lat = e.data.location.lat
transmit.farm.lon = e.data.location.lng
localStorage.setItem('transmit',JSON.stringify(transmit))
window.history.go(-1)
})
});
}
function onError(obj) {//定位失败的回调
switch(obj.info) {
case 'PERMISSION_DENIED':
alert('浏览器阻止了定位操作');
break;
case 'POSITION_UNAVAILBLE':
alert('无法获得当前位置');
break;
case 'TIMEOUT':
alert('定位超时');
break;
default:
alert('未知错误');
break;
}
}
AMap.plugin('AMap.ToolBar',function(){//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
//输入提示
var auto = new AMap.Autocomplete({
input: "sInput"
});
var placeSearch = new AMap.PlaceSearch({
map: map,
children:0,
extensions:'base',
pageIndex:1,
pageSize:5,//搜索后只显示一条数据(也就是一个点)
panel: "panel",
renderStyle:'default'
}); //构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
AMap.event.addListener(placeSearch, "listElementClick", function(e){
let transmit = JSON.parse(localStorage.getItem('transmit'))
transmit.farm.province = e.data.pname;
transmit.farm.city = e.data.cityname;
transmit.farm.district = e.data.adname;
transmit.farm.address = e.data.address;
transmit.farm.regionCode = e.data.adcode;
transmit.farm.lat = e.data.location.lat
transmit.farm.lon = e.data.location.lng
localStorage.setItem('transmit',JSON.stringify(transmit))
window.history.go(-1)
})
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name,function(status,result){
if(result.info==="OK"){
this.searchInfo= result.poiList.pois
}
}); //关键字查询查询
}
}
}
});
window['goBack'] = function(){
vm.onClickLeft()
}
</script>
</body>
</html>
高德地图根据手机初始定位及输入搜索关键字定位
猜你喜欢
转载自blog.csdn.net/Arbort_/article/details/82351236
今日推荐
周排行