vue 高德地图的使用

1、在`index.html`中引入

注意修改key值注册key

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"></script>

2、在要使用的vue 文件中

html 代码

<template><div id="container"></div>
</template>

css 代码

<style scoped lang='scss'>
#container {width: 800px;height: 500px;
}// 隐藏版权
.amap-logo {display: none;
}
.amap-copyright {opacity: 0;
}
</style>

可以直接在mounted中引入

生成最简单的地图

    var map = new AMap.Map("container", {center: [111.517973, 36.08415],zoom: 8,   // 缩放级别});

生成卫星图

    var map = new AMap.Map("container", {center: [111.517973, 36.08415],  // 定位的中心   经纬度zoom: 8,  // //卫星图layers: [new AMap.TileLayer.Satellite(),//路网new AMap.TileLayer.RoadNet(),],});

添加边界线

    var map = new AMap.Map("container", {center: [111.517973, 36.08415],zoom: 8,//卫星图layers: [new AMap.TileLayer.Satellite(),//路网new AMap.TileLayer.RoadNet(),],});AMap.plugin("AMap.ToolBar", function () {//异步加载插件var toolbar = new AMap.ToolBar();map.addControl(toolbar);});AMap.plugin("AMap.DistrictSearch", function () {// 创建行政区查询对象var district = new AMap.DistrictSearch({// 返回行政区边界坐标等具体信息extensions: "all",// 设置查询行政区级别为 区level: "city",});district.search("临汾市", function (status, result) {// 获取临汾市的边界信息var bounds = result.districtList[0].boundaries;var polygons = [];if (bounds) {for (var i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonvar polygon = new AMap.Polygon({map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: "#CCF3FF",strokeColor: "#CC66CC",});polygons.push(polygon);}// 地图自适应map.setFitView();}});})

vue 高德地图的使用相关推荐

利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场效果图: 第一步:引入 wind-layer插件或者 npm install ol-wind npm install amap-wind ht ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...
Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...

vue 高德地图的使用

1、在`index.html`中引入

2、在要使用的vue 文件中

可以直接在mounted中引入

vue 高德地图的使用相关推荐

最新文章

热门文章

vue 高德地图的使用

1、在index.html中引入

2、在要使用的vue 文件中

可以直接在mounted中引入

vue 高德地图的使用相关推荐

最新文章

热门文章

1、在`index.html`中引入