| Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） | 您所在的位置：网站首页 › 高德地图添加定位地址怎么添加 › Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） |
Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码）
|
高德地图： 与真实世界联通 - 高德开放平台为开发者赋能，将地图精致地呈现在您的应用中 无论基于哪种平台，都可以通过高德开放平台API和SDK，轻松地完成地图的构建工作 目录 效果 一、介绍 1、官方文档：地图 | 高德地图API 二、准备工作 1、注册/登录账号 2、点击控制台 3、创建应用 4、获取key和密钥，如上图所示 三、安装依赖包 1、安装命令 2、这是我的版本 四、使用步骤 1、在index.html文件中引入密钥 2、在vue文件中引入依赖包 3、申明变量并初始化调用 五、完整示例 欢迎扫描下方二维码关注VX公众号 效果
地图 | 高德地图API地图，地图sdk，地图JS API，地图定制，自定义地图，地图覆盖物，地图绘制，路线规划，坐标转换，距离/面积计算，距离测量，室内地图，地图显示，地图个性化，地图开发，室内定位
注：使用web服务API，如下图所示
代码如下（示例）： window._AMapSecurityConfig = { securityJsCode: '', // 你的密钥 } 2、在vue文件中引入依赖包代码如下（示例）： import AMapLoader from "@amap/amap-jsapi-loader" 3、申明变量并初始化调用代码如下（示例）： import { shallowRef, defineEmits, ref, onBeforeUnmount } from 'vue'; const map = shallowRef(null); let AMapObj, placeSearch, marker, geocoder; function initMap(){ AMapLoader.load({ key:'', //设置您的key version:"2.0", plugins:['AMap.ToolBar','AMap.Driving'], AMapUI:{ version:"1.1", plugins:[], }, Loca:{ version:"2.0.0" }, }).then((AMap)=>{ // console.log(AMap); AMapObj = AMap; map.value = new AMap.Map("map-box",{ viewMode:"3D", zoom:10, zooms:[2,22], center: [105.602725,37.076636], }); map.value.on('click', onMapClick); AMap.plugin( ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch', 'AMap.Geocoder','AMap.AutoComplete'], () => { // 缩放条 const toolbar = new AMap.ToolBar(); // 比例尺 const scale = new AMap.Scale(); // 定位 const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，默认:true timeout: 10000, //超过10秒后停止定位，默认：5s position: 'RT', //定位按钮的停靠位置 buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 }); geocoder = new AMap.Geocoder({ city: '全国', }); map.value.addControl(geolocation); map.value.addControl(toolbar); map.value.addControl(scale); placeSearch = new AMap.PlaceSearch({ // map: map.value, city: '全国', pageSize: 10, // 单页显示结果条数 pageIndex: 1, // 页码 citylimit: false, // 是否强制限制在设置的城市内搜索 autoFitView: true, }); }); }).catch(e=>{ console.log(e); }) } initMap(); 五、完整示例Index.html window._AMapSecurityConfig = { securityJsCode: '', // 你的密钥 }Map.vue {{item.name}} {{item.address}} 点击复制 经纬度：{{coord}} import { shallowRef, ref, onBeforeUnmount } from 'vue'; import AMapLoader from "@amap/amap-jsapi-loader"; import { message } from 'ant-design-vue'; import ClipboardJS from 'clipboard'; const clipboard = new ClipboardJS('.copy'); clipboard.on('success', function(e) { console.log(e); console.info('Text:', e.text); message.info('复制成功'); e.clearSelection(); }); clipboard.on('error', function(e) { if(!e.text) message.error('暂无可复制的内容') }); onBeforeUnmount(() => { clipboard.destroy(); }) const map = shallowRef(null); const keyword = ref(null); const data = ref([]); const coord = ref(''); let AMapObj, placeSearch, marker, geocoder; function initMap(){ AMapLoader.load({ key: '', //设置您的key version: "2.0", plugins: ['AMap.ToolBar','AMap.Driving'], AMapUI: { version: "1.1", plugins: [], }, Loca:{ version: "2.0.0" }, }).then((AMap)=>{ // console.log(AMap); AMapObj = AMap; map.value = new AMap.Map("map-box",{ viewMode:"3D", zoom:10, zooms:[2,22], center: [105.602725,37.076636], }); map.value.on('click', onMapClick); AMap.plugin( ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch', 'AMap.Geocoder','AMap.AutoComplete'], () => { // 缩放条 const toolbar = new AMap.ToolBar(); // 比例尺 const scale = new AMap.Scale(); // 定位 const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位，默认:true timeout: 10000, // 超过10秒后停止定位，默认：5s position: 'RT', // 定位按钮的停靠位置 buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点 }); geocoder = new AMap.Geocoder({ city: '全国', }); map.value.addControl(geolocation); map.value.addControl(toolbar); map.value.addControl(scale); placeSearch = new AMap.PlaceSearch({ city: '全国', pageSize: 10, // 单页显示结果条数 pageIndex: 1, // 页码 citylimit: false, // 是否强制限制在设置的城市内搜索 autoFitView: true, }); }); }).catch(e=>{ console.log(e); }) } // 搜索地图 function handleSearch(str) { placeSearch.search(str, (status, result) => { console.log(result); if (result && typeof result === 'object' && result.poiList) { const list = result.poiList.pois; list.forEach(item => { item.value = item.name; item.label = item.name; }); data.value = list } }); } // 点击地图 function onMapClick(e) { coord.value = e.lnglat.lng + ',' + e.lnglat.lat geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], function(status, result) { if (status === 'complete' && result.info === 'OK') { // result为对应的地理位置详细信息 keyword.value = result.regeocode.formattedAddress } }) drawMarker(e.lnglat) } // 点击搜索项 function handleSelect(item) { console.log(item); drawMarker(item.location) if (item.location != null) { coord.value = item.location.lng + ',' + item.location.lat } } // 绘制地点marker function drawMarker(location) { if (location == null) return let longitude = location.lng, latitude = location.lat if (marker) { marker.setMap(null); } marker = new AMapObj.Marker({ position: new AMapObj.LngLat(longitude, latitude), anchor: 'bottom-center', }); marker.on('click', () => { coord.value = location; }) map.value.add(marker); map.value.setZoomAndCenter(16, [longitude, latitude]); } initMap(); .home{ height: 500px; width: 100%; padding: 0px; margin: 0px; position: relative; .info-box { position: absolute; top: 8px; right: 8px; width: 300px; background-color: #1f1f1f; display: flex; flex-direction: column; } } #map-box{ height: 100%; width: 100%; padding: 0px; margin: 0px; } :deep() .amap-logo { display: none !important; } :deep() .amap-copyright { display: none !important; }注：clipboard一键复制的详细使用方法参考地址 https://mp.csdn.net/mp_blog/creation/editor/131308740 欢迎扫描下方二维码关注VX公众号
|
https://lbs.amap.com/product/map#/
【本文地址】
公司简介
联系我们