PC端高德地图使用步骤:
1、注册并登录高德开放平台获取
2、安装高德依赖(amap-jsapi-loader)
3、初始化地图
4、首次打开地图获取当前定位并标记
5、根据已有地址自动定位到指定地址并标记
6、新增、清除标记及自定义信息窗体
7、鼠标点击地图并选点标记
8、根据关键字搜索并自动定位
9、效果图
10、完整代码
高德官方api:高德官方开放平台
一、注册并登录高德开放平台获取(key和秘钥)
引用:
二、安装高德依赖
npm i @amap/amap-jsapi-loader --save
三、初始化地图
封装公共的地图组件:
mounted() { this.initMap() }, methods:{ initMap(){ AMapLoader.load({ key:"**********************", // 申请好的Web端开发者Key,首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [ //需要使用的插件 'AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder', 'AMap.CitySearch' ], resizeEnable: true, }).then((AMap)=>{ const that = this; that.map = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:12, //初始化地图级别 }); }).catch(e=>{ console.log(e); }) },
四、首次打开地图获取当前定位并标记
initMap(){ AMapLoader.load({ key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [ 'AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder', 'AMap.CitySearch' ], resizeEnable: true, }).then((AMap)=>{ const that = this; that.map = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:12, //初始化地图级别 }); that.getCurrentLocation();//获取当前定位 that.geocoder = new AMap.Geocoder() that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺 that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件,在地图右下角显示地图的缩略图 }).catch(e=>{ console.log(e); }) }, //获取当前定位 getCurrentLocation(){ const that = this; that.geolocation = new AMap.Geolocation({ timeout: 3000, //超过3秒后停止定位,默认:5s enableHighAccuracy: true, zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 }); that.geolocation.getCurrentPosition(function(status,result){ //备注:getCurrentPosition方法会调用超时或失败: //Get geolocation time out:浏览器定位超时,包括原生的超时,可以适当增加超时属性的设定值以减少这一现象。 //另外还有个别浏览器(如google Chrome浏览器等)本身的定位接口是黑洞,通过其请求定位完全没有回应,也会超时返回失败。 //Get geolocation failed:定位失败,Chrome、火狐以及部分套壳浏览器接入的定位服务在国外,有较大限制,失败率高。 console.log(status,result); if(status=='complete'){ that.onComplete(result) }else{ that.onError(result) //失败后可使用getCityInfo获取非精准定位(具体到省市) } }); }, //解析定位结果 onComplete(data) { console.log('定位结果:' + data.position) //经纬度信息 let lnglat = data.position; let marker = new AMap.Marker({ //创建标记 position: new AMap.LngLat(lnglat[0], lnglat[1]) }) this.map.clearMap()// 清除所有覆盖物(点标志) this.map.add(marker)// 添加点标志 let that = this //经纬度转换为中文地址详情 that.geocoder.getAddress(lnglat, function (status, result) { if (status === 'complete' && result.regeocode) { that.address = result.regeocode.formattedAddress; that.showInfoWindow(marker);//自定义信息窗体 } else { that.$message.error('根据经纬度查询地址失败') } }) }, //解析定位错误信息 onError(data) { this.getLngLatLocation() }, //在获取具体定位失败时调用的代码:(非精准定位!!!) getLngLatLocation() { const that = this; that.geolocation.getCityInfo(function (status, result) { if (status === 'complete') { let data = result.position that.address = result.province + result.city; that.showLocation(data) } else { that.$message.error('获取地址失败') } }) },
五、根据已有地址自动定位到指定地址并标记
initMap(){ AMapLoader.load({ key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [ 'AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder', 'AMap.CitySearch' ], resizeEnable: true, }).then((AMap)=>{ const that = this; that.map = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:15, //初始化地图级别 center:[that.positionInfo.lng,that.positionInfo.lat]; // 首次加载地图自动加载到指定位置中心 }); that.showLocation(data) //新增标记并展示信息窗体 that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺 that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件,在地图右下角显示地图的缩略图 }).catch(e=>{ console.log(e); }) },
六、新增、清除标记及自定义信息窗体
//新增标记 showLocation(data){ let marker = new AMap.Marker({ position: new AMap.LngLat( data[0],data[1]) //参数为经纬度 }) this.map.clearMap()// 清除所有覆盖物(点标志) this.map.add(marker)// 添加点标志 this.showInfoWindow(marker);//自定义信息窗体 }, //自定义信息窗体 showInfoWindow(marker){ let infoWindow = new AMap.InfoWindow({ isCustom: true, //是否自定义信息窗体 content: ` 地址:${this.address}`, closeWhenClickMap: true, zIndex: 999, offset: new AMap.Pixel(16, -35) }); infoWindow.open(this.map, marker.getPosition()); },
七、鼠标点击地图并选点标记
initMap(){ AMapLoader.load({ key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [ 'AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder', 'AMap.CitySearch' ], resizeEnable: true, }).then((AMap)=>{ const that = this; that.map = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:12, //初始化地图级别 }); that.geocoder = new AMap.Geocoder() that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺 that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件,在地图右下角显示地图的缩略图 that.handleClick(AMap)//地图选点 }).catch(e=>{ console.log(e); }) }, //点击地图获取地理位置 handleClick(){ this.map.on('click', (e) => { let lng = e.lnglat.lng let lat = e.lnglat.lat let marker = new AMap.Marker({ position: new AMap.LngLat(lng, lat) }) this.map.clearMap()// 清除所有覆盖物(点标志) this.map.add(marker)// 添加点标志 let lnglat = [lng, lat] let that = this that.geocoder.getAddress(lnglat, function (status, result) { if (status === 'complete' && result.regeocode) { that.address = result.regeocode.formattedAddress; that.showInfoWindow(marker);//自定义信息窗体 let thisPosition = { address: that.address, lng: lng, lat: lat }; that.$emit("select",thisPosition) //返回给父组件 } else { that.$message.error('根据经纬度查询地址失败') } }) }) },
八、根据关键字搜索并自动定位
//搜索框及搜索结果选择窗//搜索框//搜索结果选择窗关键字搜索 //地图
- {{item.name}}
initMap(){ AMapLoader.load({ key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [ 'AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder', 'AMap.CitySearch' ], resizeEnable: true, }).then((AMap)=>{ const that = this; that.map = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:12, //初始化地图级别 }); that.handleClick(AMap)//地图选点 that.map.addControl(new AMap.Scale()) // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺 that.map.addControl(new AMap.ToolBar()) //在图面添加鹰眼控件,在地图右下角显示地图的缩略图 that.geocoder = new AMap.Geocoder() that.mapSearchInit() }).catch(e=>{ console.log(e); }) },
/** 初始化搜索 */ mapSearchInit(){ let autoOptions = { input: "tipInput", } let autoCompleteComponent= new AMap.Autocomplete(autoOptions); this.autoCompleteComponent = autoCompleteComponent; // 注册placeSearch组件 this.placeSearchComponent = new AMap.PlaceSearch() }, //根据输入内容查询 searchKeyWord(){ let that= this that.placeSearchComponent.search(that.mapAddress, function (status, result) { if(status==='complete' && result.info === "OK"){ that.showsearchResult = true that.poiList = result.poiList.pois }else{ that.showsearchResult = false that.poiList = [] that.$message({ message: "没有查到结果", type: "warning", }); } }) }, //选择搜索的内容 markerResult(data){ this.showsearchResult = false; this.address = data.name; var marker = new AMap.Marker({ position: [Number(data.location.lng),Number(data.location.lat)], }); this.map.clearMap()// 清除所有覆盖物(点标志) this.map.add(marker)// 添加点标志 this.showInfoWindow(marker); setTimeout(() => { this.map.setCenter(data.location); this.map.setZoom(15); }, 50) let thisPosition = { address: this.address, lng: data.location.lng, lat: data.location.lat }; this.$emit("select",thisPosition) },
九、效果图
十、完整代码
点赞收藏留言会提供哈~~~
猜你喜欢
- 12天前(夏日旅行海报)夏日旅行|精简行囊 向快乐进发
- 12天前(屿见不一样是哪个酒店)屿见白纱,遇见自己 “佳能PhotoGirls屿见白纱”摄影派对玩转海岛
- 12天前(甘州区文化旅游局)2025甘津文旅资源对接推介会在兰州举办
- 12天前(2025年“文化和自然遗产日”广东主会场活动举办)2025年“文化和自然遗产日”广东主会场活动举办
- 12天前(新西兰航空官方网站)新西兰航空85周年焕新启航 全方位客舱升级,飞「悦」快意时光
- 12天前(内蒙古冬季旅游攻略)内蒙古冬日奇遇:携程租车带你策马踏雪
- 12天前(冬日生活还没安排?上抖音一键打包北方花式过冬精彩)冬日生活还没安排?上抖音一键打包北方花式过冬精彩
- 12天前(锦江 iu)锦江荟APP原生鸿蒙版正式上线打造全场景旅行服务新体验
- 12天前(曹妃甸美仑华府哪个楼层好)曹妃甸新城教育经济新引擎启动—美仑国际酒店盛大开业
- 12天前(阿斯塔纳航空属于哪个联盟)阿斯塔纳航空荣获Skytrax世界航空公司大奖,将继续助力中哈交流往来
网友评论
- 搜索
- 最新文章
- (2020广州车展哈弗)你的猛龙 独一无二 哈弗猛龙广州车展闪耀登场
- (哈弗新能源suv2019款)智能科技颠覆出行体验 哈弗重塑新能源越野SUV价值认知
- (2021款全新哈弗h5自动四驱报价)新哈弗H5再赴保障之旅,无惧冰雪护航哈弗全民电四驱挑战赛
- (海南航空现况怎样)用一场直播找到市场扩张新渠道,海南航空做对了什么?
- (visa jcb 日本)优惠面面俱到 JCB信用卡邀您畅玩日本冰雪季
- (第三届“堡里有年味·回村过大年”民俗花灯会活动)第三届“堡里有年味·回村过大年”民俗花灯会活动
- (展示非遗魅力 长安启源助力铜梁龙舞出征)展示非遗魅力 长安启源助力铜梁龙舞出征
- (阿斯塔纳航空公司)阿斯塔纳航空机队飞机数量增至50架
- (北京香港航班动态查询)香港快运航空北京大兴新航线今日首航
- (我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉)我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉
- 热门文章