在vue种使用高德地图

vue3使用高德地图API的心得，以下内容是本人在项目实战中遇到的，亲测可用

1.初始化地图

cnpm下载amap-jsapi-loader之后在你所需要渲染地图的页面引入相应的依赖

import AMapLoader from '@amap/amap-jsapi-loader'

2，开始加载地图，切记你需要申请高德地图开发者模式的key，怎么申请就不赘述了，自己百度一大堆，废话不多说，直接上代码

<div id="mapDiv" class="mapDiv"><div>
let AMap  = null
let mapInstance = null
AMapLoader.load({key: '1f648c12a2709a14b0e79551fdc5f791', // 开发应用的 IDversion: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.ToolBar','AMap.Scale', // 比例尺'AMap.Geolocation','AMap.Geocoder','Map3D',//加载3d地图的插件'AMap.DistrictSearch','AMap.GeoJSON','AMap.Polygon',],Loca: {version: '2.0.0',},}).then((map) => {AMap = mapmapInstance = new AMap.Map('mapDiv', {mapStyle: 'amap://styles/darkblue',center: [116.631974, 40.317003],//地图的中心点resizeEnable: true,zoom: 12,//控制地图缩放})})//这样一个地图就完成了

备注：plugins这个数组里边是地图的插件，比如你需要在地图上加载区县或者乡镇边界，那就将AMap.GeoJSON，AMap.Polygon这两个插件写进去，可以按需写入，记住他有很多插件可供使用

3，创建点位并自定义图标

假如有很多点，那就循环创建
let iconMaker = new AMap.Marker({position: new AMap.LngLat(item.longitude, item.latitude),offset: new AMap.Pixel(-7, 10),icon: iconImgUrl, // 新建 Icon 图标 URLsize: new AMap.Size(24, 24),imageSize: new AMap.Size(24, 24),//temp: item.temp,//自定义字段，可用于信息窗体展示的信息字段
})

在vue种使用高德地图相关推荐

vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...

在vue种使用高德地图

vue3使用高德地图API的心得，以下内容是本人在项目实战中遇到的，亲测可用

1.初始化地图

2，开始加载地图，切记你需要申请高德地图开发者模式的key，怎么申请就不赘述了，自己百度一大堆，废话不多说，直接上代码

3，创建点位并自定义图标

在vue种使用高德地图相关推荐

最新文章

热门文章