vue项目+高德地图

最近由于项目的需求使用到了高德地图,小编自己在空余时间总结加深一下高德地图方面的知识

一、在vue项目中使用高德地图首先我们要注册一个账户,然后需要在-应用管理-我的应用,创建一个新应用会生成key和秘钥(如下图)

二、做完以上的步骤接下来需要在vue项目使用它,获取高德地图 API，JS通过标签引入和JSAPI loader二种方式.那么小编使用的是第二种方式(JSAPI loader)

cnpm i @amap/amap-jsapi-loader --save

三、完成是初始化地图

<scrirpt>//引入import AMapLoader from "@amap/amap-jsapi-loader";// 设置安全密钥window._AMapSecurityConfig = {securityJsCode: '用自己的秘钥',}exprot default{data() {return{}},mounted(){AMapLoader.load({"key": "自己生成的key","version": "2.0", // 指定要加载的 JSAPI 的版本"plugins": [] // 需要使用的的插件列表}).then((AMap) => {// 初始化地图this.map = new AMap.Map('gaode-map', {viewMode: "2D", //  是否为3D地图模式zoom: 12, // 初始化地图级别center: this.lnglat, //中心点坐标深圳resizeEnable: true,lang: 'en'})}
</script>

四、实现一个窗口功能

mounted(){//我就不初始化地图了,接着写//添加标记let marker = new AMap.Marker({position: this.lnglat});marker.setMap(this.map);//信息窗口(这里设置立即执行函数,是因为进入这个页面信息窗口就打开)(function() {var infoWindow = new AMap.InfoWindow({isCustom: true, //使用自定义窗体content: that.createHtml(), //传入 dom 对象，或者 html 字符串(如下图)offset: new AMap.Pixel(16, -50)});infoWindow.open(that.map, that.lnglat);//第一个参数是地图象 第二个经纬度})()}).catch(e => {console.log(e);})})
},
methods:{createHtml(){let markerContent=''//样式我就不写了markerContent=<div class='custom-content-marker'></div>//这里就是些你的html,记得returnreturn markerContent}
}

五.如何通过地址获取该地方的经纬度

mounted(){AMapLoader.load({key: "自己的key", //多少?version: "2.0", // 指定要加载的 JSAPI 的版本plugins: ["AMap.Geocoder"], // 需要使用的的插件列表}).then((AMap) => {let geocoder = new AMap.Geocoder();let address = "北京天安门";//要查询的地址geocoder.getLocation(address, function (status, result) {if (status === "complete" && result.geocodes.length) {var lnglat = result.geocodes[0].location;console.log(lnglat);} else {console.log(error);}});});
}

如何在项目中有其他需求比如天气、导航、公交路线规划的等等需求其可以查看高德开发平台,如果有说的不太对的地方,欢迎大家指导.

vue项目+高德地图相关推荐

vue项目高德地图Mixed Content: The page at ‘https://****.com/cockpit/‘ was loaded over HTTPS, b
vue项目高德地图引入https相关报错 vue项目中高德地图引入相关问题原因和解决方案 vue项目中高德地图引入相关问题公司年前一个vue项目一期,其中有个数据可视化模块引入了高德地图,年前发布 ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...

vue项目+高德地图

vue项目+高德地图相关推荐

最新文章

热门文章