现在做这个移动端的项目中有一个地图选址的功能,本来高德地图中有一个现成的选址组件,但是有两个问题,因为他是用iframe引用的,第一改不了样式,这点还勉强能接受,第二他的左上角有一个返回键,在搜索的时候可以返回到地图界面,但是在地图界面时点返回没有用,试了半天也没搞明白怎么监听到那个返回键的点击事件,所以趁这两天项目基本结束自己写一个把这个功能优化一下,也方便以后使用。
vue的安装使用啥的我在这就不说了,直接开始地图选址组件。
首先上高德开放平台弄一个键,然后在索引。html引入
& lt;脚本src=" https://webapi.amap.com/maps& # 63; v=1.4.14&关键=yourKey祝辞& lt;/script>
然后写样式
css我就不贴了,大概就是上面一个搜索框,中间是地图,然后下面是一个地址列表,然后一个搜索结果的列表。有一点值得注意一下,就是地图中心的定位图标,这个自己弄一个定位图标使用绝对定位,上下左右外边距为汽车的方法定位到中间,但是这时地图的中心点是在图标的中心,我们的图标不是一般都是下面是尖的嘛,选址的时候都会用尖的部分指到目标位置,那这样就会有一点偏差,怎么办呢,比如我们的图标是30 * 30的,我们就把底部的值设为图标的高度的一半,或者是把前设为-15,就好了,另外注意在切图的时候靠着图标边切,不要留空白。
数据里定义的值:
数据(){
返回{
中心:[106.532357,29.57212],//纬度——经度
search_key:“,//搜索值
列表:[],//地点列的表
search_list:[],//搜索结果列表
noSearchShow:假//无搜索结果提示,无搜索结果时会显示暂无搜索结果
}
},
之前
然后在安装中调取第一个方法- - - - - -初始化地图:
adMap () {//初始化地图
var=new AMap.Map地图(“容器”,{
变焦:14日//缩放级别
中心:这个。中心//设置地图中心点//resizeEnable:真的,//地图初始化加载定位到当前城市
});//获取初始中心点并赋值
var currentCenter=map.getCenter();//此方法是获取当前地图的中心点
这一点。中心=[currentCenter.lng, currentCenter.lat];//将获取到的中心点的纬度经度赋值给数据的中心//根据地图中心点查附近地点,此方法在下方
this.centerSearch ();//监听地图移动事件,并在移动结束后获取地图中心点并更新地点列的表
var moveendFun=(e)=比;{//获取地图中心点
currentCenter=map.getCenter ();
这一点。中心=[currentCenter.lng currentCenter.lat]//根据地图中心点查附近地点
this.centerSearch ();
}//绑定事件移动地图事件
地图。(“moveend”, moveendFun);
},
之前
根据中心点查询附近地点
centerSearch () {
AMap.service([”同理。PlaceSearch”),()=比;{//构造地点查询类
var placeSearch=new AMap.PlaceSearch ({
类型:“汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息的,//兴趣点类别//页大小:30日单页显示结果条数
pageIndex: 1、//页码
城市:“全国”,//兴趣点城市
autoFitView:假//是否自动调整地图视野使绘制的标记点都处于视口的可见范围
});//根据地图中心点查附近地点
placeSearch。searchNearBy (”, [this.center[0],这一点。200年中心[1]],(状态、结果)=比;{
如果(状态=='完成'){
这一点。列表=result.poiList.pois//将查询到的地点赋值
}
});
});
},
之前
这个方法没什么好说的,就是高德地图的方法,复制过来就行了,要注意的几个点:
1.类型,需要查找的地点的分类,这个可以按需添加减少;
2。这里可以传条数和页码,如果需要做上拉加载的都可以使用这个;
