vue 高德地图

1.引入高德地图 

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=AK"></script>

AK:是自己申请的高的appKey

2.手机端跳转到网页版高德地图

 

AMap.plugin(["AMap.PlaceSearch"], function () {
   //构造地点查询类
   var placeSearch = new AMap.PlaceSearch({
       pageSize: 1, // 单页显示结果条数
       pageIndex: 1, // 页码
   });
   //关键字查询
   placeSearch.search("北京大学人民医院", function (status, result) {
      if (JSON.stringify(result) != "{}" && result.poiList.pois.length > 0) {// 查询成功时，result即对应匹配的POI信息
          // window.location.href = "https://m.amap.com/search/mapview/keywords=" + "天安门" + "&city=" + result.poiList.pois[0].cityname + "&poiid=" + result.poiList.pois[0].id + "&src=pc";
           // window.location.href = "https://m.amap.com/search/mapview/poiid=" + result.poiList.pois[0].id;
   
placeSearch.detailOnAMAP({id:result.poiList.pois[0].id,name:"北京大学人民医院",location:result.poiList.pois[0].location});
       } else {
            this.toast_warn("查无此地!");
            return;
       }
    })
});

AMap.PlaceSearch

地点搜索服务，提供某一特定地区的位置查询服务。PlaceSearch构造函数的参数为可选，表达为参数对象PlaceSearchOptions。PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息。

构造函数	说明
AMap.PlaceSearch(opts:PlaceSearchOptions )	创建地点查询类的实例

PlaceSearchOptions	类型	说明
city	String	兴趣点城市 可选值：城市名（中文或中文全拼）、citycode、adcode 默认值：“全国”
citylimit	Boolean	是否强制限制在设置的城市内搜索，默认值为：false true：强制限制设定城市，false：不强制限制设定城市
children	Number	是否按照层级展示子POI数据,默认0 children=1，展示子节点POI数据，children=0，不展示子节点数据
type	String	兴趣点类别，多个类别用“|”分割，如“餐饮|酒店|电影院” POI搜索类型共分为以下20种： 汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务| 医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务| 交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施 默认值：餐饮服务、商务住宅、生活服务
lang	String	检索语言类型 可选值：zh_cn：中文简体，en：英文 默认为: zh_cn：中文简体
pageSize	Number	单页显示结果条数 默认值：10 取值范围：1-50，超出取值范围按最大值返回
pageIndex	Number	页码。（如pageIndex为2，pageSize为10，那么显示的应是第11-20条返回结果） 默认值：1 取值范围：1-100，超过实际页数不返回poi
extensions	String	此项默认值：base，返回基本地址信息 取值：all，返回基本+详细信息
map	Map	AMap.Map对象, 展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。可选值
panel	String|HTMLElement	结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选值
showCover	Boolean	在使用map属性时，是否在地图上显示周边搜索的圆或者范围搜索的多边形，默认为true
renderStyle	String	如使用了map或panel属性，renderStyle可以用来设定绘制的UI风格，缺省为'newpc' 可选值:'newpc'或'default'，'newpc'为带图片展示的新样式，'default'为原有简单样式。
autoFitView	Boolean	用于控制在搜索结束后，是否自动调整地图视野使绘制的Marker点都处于视口的可见范围

方法	返回值	说明
search(keyword:String, callback:function(status:String,result:info/SearchResult))		根据关键字搜索，关键字支持中文|中文全拼、繁体、英文 当status为complete时，result为SearchResult； 当status为error时，result为错误信息info； 当status为no_data时，代表检索返回0结果 相关示例
searchNearBy(keyword:String,center:LngLat,radius:Number, callback:function(status:String,result:info/SearchResult))		根据中心点经纬度、半径以及关键字进行周边查询 radius取值范围：0-50000 status说明同上 相关示例
searchInBounds(keyword:String,bounds:Bounds|Polygon, callback:function(status:String,result:info/SearchResult))		根据范围和关键词进行范围查询 status说明同上相关示例
getDetails(POIID:String, callback:function(status:String,result:info/SearchResult))		根据POIID 查询POI 详细信息 status说明同上 相关示例
setType(type:String)		设置查询类别，多个类别用“|”分割 默认值：所有类别
setCityLimit(Boolean)		设置是否强制限制城市
setPageIndex(pageIndex:Number)		设置查询结果特定页数 默认值：1 取值范围：1-100，超过实际页数不返回poi
setPageSize(setPageSize:Number)		设置查询单页结果数 默认值：10 取值范围：1-50，超出取值范围按最大值返回
setCity(city:String)		设置查询城市 支持cityname（中文或中文全拼）、citycode、adcode
setLang(lang:String)	String	设置检索语言类型
getLang( )	String	获取placeSearch检索语言类型 （自v1.3 新增）
clear()		清除搜索结果
poiOnAMAP(obj:Object)		唤起高德地图客户端marker页 Object参数形如： {   id: "B000A7BD6C",POIID name:String, 必要参数 location:LngLat|position属性  必须参数 }
detailOnAMAP(obj:Object)		唤起高德地图客户端POI详情页 Object参数形如： {   id: "B000A7BD6C",POIID name:String, 必要参数 location:LngLat|position属性  必须参数 }

事件	参数	说明
complete	SearchResult	当查询成功时触发此事件
error	ErrorStatus	当查询失败时触发此事件
selectChanged	SelectChangeEvent	使用map、panel属性后，选中的POI改变时触发
listElementClick	SelectChangeEvent	使用map、panel属性后，结果面板中POI对应的列表项被点击时触发
markerClick	SelectChangeEvent	使用map、panel属性后，POI在地图中对应的Marker被点击时触发