1 2 3 4 // 地址 const map_address = ref(''); // 地图类型 const map_type = ref('tianditu'); 组件回调: 1 2 3 4 5 //地图用于回调用于获取坐标 const map_point = (lng: number, lat: number) => { form.lng = lng; form.lat = lat; }; 地图效果展示: 分类: vue3 标签: 吃...
简介: vue3使用高德地图实现点击获取经纬度以及搜索功能 话不多说直接上干活 在此之前你需要有高德地图的key,这个自己去申请即可 1,首先需要在终端安装 npm i @amap/amap-jsapi-loader --save 2,准备一个容器 <template> </template> #container{ padding:0px; margin: 0px; width: 100%; height: 800...
在项目根目录创建文件vue.config.js,注意配置文件最好别用ts,在js文件中粘贴以下代码 module.exports= {configureWebpack: {externals: {'AMap':'AMap'// 表示CDN引入的高德地图} } } 新建vue文件,粘贴以下css代码和结构 ps:css代码是搜索框的样式,高德地图也有自带 <template>请输入关键字</template> @import...
第二步:在 vue3 项目中使用高德地图 api 复制刚刚创建好的 key。 在pulic/index.html 通过 CDN 引入高德地图 api。 ps:CDN 在这里的意指通过链接加载的某些组件库,而不是通过 npm,组件通过 CDN 加载可以启到一定程度的加速效果。 在项目根目录创建文件 vue.config.js ,注意配置文件最好别用 ts,在 js ...
第二步:在 vue3 项目中使用高德地图 api 复制刚刚创建好的 key。 在pulic/index.html 通过 CDN 引入高德地图 api。 ps:CDN 在这里的意指通过链接加载的某些组件库,而不是通过 npm,组件通过 CDN 加载可以启到一定程度的加速效果。 在项目根目录创建文件 vue.config.js ,注意配置文件最好别用 ts,在 js ...