CDN 方式

<!--引入高德地图JSAPI -->
<script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script> <!--引入UI组件库(1.0版本) -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

配置externals 文件路径 build>webpack.base.conf.js > module.exports = {}

  externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI'
},

页面实现

<template>
<div class="amap-page-container">
<div id="container" style="width:100vw;height:70vh"></div>
</div>
</template> <script>
export default {
data() {
return {};
},
created() {
// 配置
},
mounted() {
this.$nextTick(() => {
var map = new AMap.Map("container", {
center: [116.397559, 39.89621],
zoom: 14
});
// 定义图标信息
var icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 46),
// 图标的取图地址
image:
"http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
// 图标所用图片大小
imageSize: new AMap.Size(32, 46)
});
// 文字描述内容
var labelContent = "<span>1</span>";
// 文字描述显示位置
var labelOffset = new AMap.Pixel(8, 7);
// 绘制坐标点
var marker = new AMap.Marker({
icon: icon,
position: [116.303843, 39.983412],
offset: new AMap.Pixel(-10, -46),
title: 1,
text: 1,
label: {
content: labelContent,
offset: labelOffset
}
});
marker.setMap(map);
var labelContent = "<span>2</span>";
var labelOffset = new AMap.Pixel(8, 7);
var marker2 = new AMap.Marker({
icon: icon,
anchor: "center", //设置锚点
position: [116.321354, 39.896436],
offset: new AMap.Pixel(-10, -28),
title: 2,
clickable: true,
bubble: true,
label: {
content: labelContent,
offset: labelOffset
}
});
marker2.setMap(map);
    // 事件
      AMap.event.addListener(marker, "click", function(e) {
        debugger;
        //得到的数据
      });
      AMap.event.addListener(marker2, "click", function(e) {
        debugger;
        //得到的数据
      });
// 绘制路线
map.plugin("AMap.TruckDriving", function() {
var truckDriving = new AMap.TruckDriving({
map: map,
policy: 0, // 规划策略
size: 1, // 车型大小
width: 2.5, // 宽度
height: 2, // 高度
load: 1, // 载重
weight: 12, // 自重
axlesNum: 2, // 轴数
province: "京", // 车辆牌照省份
isOutline: true,
outlineColor: "#ffeeee",
hideMarkers: true
});
var path = [];
path.push({ lnglat: [116.303843, 39.983412] }); //起点
path.push({ lnglat: [116.321354, 39.896436] }); //途径
path.push({ lnglat: [116.407012, 39.992093] }); //终点 truckDriving.search(path, function(status, result) {
// searchResult即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
log.success("获取货车规划数据成功");
} else {
log.error("获取货车规划数据失败:" + result);
}
});
});
});
},
methods: {}
};
</script>
<style>
.amap-marker-label {
border: 0px;
background: rgba(255, 255, 255, 0);
color: #fff;
font-size: 17px;
font-weight: 550;
text-align: center;
}
</style>

NPM 方式

npm install vue-amap --save

配置main.js

import VueAMap from 'vue-amap'
// 初始化vue-amap
VueAMap.initAMapApiLoader({
key: '您申请的key值',
plugin: [
'AMap.Autocomplete', // 输入提示插件
'AMap.PlaceSearch', // POI搜索插件
'AMap.Scale', // 右下角缩略图插件 比例尺
'AMap.OverView', // 地图鹰眼插件
'AMap.ToolBar', // 地图工具条
'AMap.MapType', // 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
'AMap.PolyEditor', // 编辑 折线多,边形
'AMap.CircleEditor', // 圆形编辑器插件
'AMap.Geolocation', // 定位控件,用来获取和展示用户主机所在的经纬度位置
'AMap.TruckDriving' // 路径规划
],
v: '1.4.13'
})
Vue.use(VueAMap)

页面实现

<template>
<div class="amap-page-container">
<el-amap
:plugin="plugin"
:amap-manager="amapManager"
:zoom="zoom"
:center="center"
vid="amapDemo"
ref="reds"
style="width:100vw;height:80vh"
:events="events"
></el-amap>
</div>
</template> <script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
var map = amapManager.getMap();
export default {
data() {
let _obj = this;
return {
amapManager,
center: [116.303843, 39.983412],
plugin: [
{
pName: "Scale",
events: {
init(instance) {
console.log(instance);
}
}
}
],
zoom: 12,
events: {
init(o) {
_obj.createMap();
}
}
};
},
created() {
// 配置
},
mounted() {},
methods: {
createMap() {
    
let o = amapManager.getMap(); var icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 46),
// 图标的取图地址
image:
"http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
// 图标所用图片大小
imageSize: new AMap.Size(32, 46)
});
var labelContent = "<span>1</span>";
var labelOffset = new AMap.Pixel(8, 7);
var marker = new AMap.Marker({
icon: icon,
position: [116.303843, 39.983412],
offset: new AMap.Pixel(-10, -46),
title: 1,
text: 1,
label: {
content: labelContent,
offset: labelOffset
}
});
marker.setMap(o);
var labelContent = "<span>2</span>";
var labelOffset = new AMap.Pixel(8, 7);
var marker2 = new AMap.Marker({
icon: icon,
anchor: "center", //设置锚点
position: [116.321354, 39.896436],
offset: new AMap.Pixel(-10, -28),
title: 2,
clickable: true,
bubble: true,
label: {
content: labelContent,
offset: labelOffset
}
});
marker2.setMap(o); var truckDriving = new AMap.TruckDriving({
map: o,
policy: 0, // 规划策略
size: 1, // 车型大小
width: 2.5, // 宽度
height: 2, // 高度
load: 1, // 载重
weight: 12, // 自重
axlesNum: 2, // 轴数
province: "京", // 车辆牌照省份
isOutline: true,
outlineColor: "#ffeeee",
hideMarkers: true
}); var path = [];
path.push({ lnglat: [116.303843, 39.983412] }); //起点
path.push({ lnglat: [116.321354, 39.896436] }); //途径
path.push({ lnglat: [116.407012, 39.992093] }); //终点 truckDriving.search(path, function(status, result) {
if (status === "complete") {
console.log("获取货车规划数据成功");
} else {
console.log("获取货车规划数据失败:" + result);
}
// searchResult即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
});
AMap.event.addListener(marker, "click", function(e) {
debugger;
//得到的数据
});
AMap.event.addListener(marker2, "click", function(e) {
debugger;
//得到的数据
});
}
}
};
</script>
<style>
.amap-marker-label {
border: 0px;
background: rgba(255, 255, 255, 0);
color: #fff;
font-size: 17px;
font-weight: 550;
text-align: center;
}
</style>

Vue 高德地图 路径规划 画点的更多相关文章

  1. iOS百度地图路径规划和POI检索详细总结-b

    路径规划.png 百度地图的使用 百度地图API的导入网上说了许多坑,不过我遇到的比较少,这里就放两个比较常见的吧.坑一: 奥联WIFI_xcodeproj.png 如上图所示,在infoplist里 ...

  2. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  3. VUE 高德地图选取地址组件开发

    高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...

  4. 第四届58topcoder编程大赛--地图路径规划

    layout: post title: 第四届58topcoder编程大赛 subtitle: 58ACM catalog: true tags: - A* 算法 - C++ - 程序设计 问题及背景 ...

  5. js/vue 高德地图绘制驾车路线图

    地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...

  6. vue 高德地图

    index.html <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119. ...

  7. vue 高德地图使用 vue-amap

    此插件文档及使用还不错 https://elemefe.github.io/vue-amap/ <template> <div class="amap-page-conta ...

  8. Google地图路线规划

    Google地图路线规划: 需求:给定的两点之间Google地图路径规划和详情. 代码实现: //map定义省略 var directionsDisplay = new google.maps.Dir ...

  9. iOS高德地图使用-搜索,路径规划

    项目中想加入地图功能,使用高德地图第三方,想要实现确定一个位置,搜索路线并且显示的方法.耗了一番功夫,总算实现了. 效果 WeChat_1462507820.jpeg 一.配置工作 1.申请key 访 ...

随机推荐

  1. 2_abstractions

    2. Up and down the level of abstraction In this chapter, we'll travel up and down the level of abstr ...

  2. IP地址分类及其相关计算问题

    IP地址分类及其相关计算问题 公网IP和子网IP 公网IP: • A类:1.0.0.0 到 127.255.255.255 主要分配 给大量主机而局域网网络数量较少的大型网络 • B类:128.0.0 ...

  3. host文件无写权限时,怎么设置

    点击文件属性---安全---选择对应的用户---编辑属性---勾选需要的属性---应用---确定

  4. Codeforces Round #619 (Div. 2) A~D题解

    最近网课也开始了,牛客上一堆比赛题目也没补,所以就D题后面的也懒得补了 A.Three String 水题 #include <cstdio> #include <cstring&g ...

  5. win10驱动签名禁用与启动

    禁用:https://jingyan.baidu.com/article/624e74594dbc8d34e8ba5aa6.html?qq-pf-to=pcqq.c2c 启用或恢复:https://z ...

  6. Failed to restart docker.service: Unit not found 镜像加速

    解决方案 以前的安装残留 重新安装 find / -name "docker*" centos8 添加软件源信息 yum-config-manager --add-repo htt ...

  7. 使用Vmware过程中,突然网络连接不上问题

    ###第一次的解决方法: 1.我一般过一段时间就会对虚拟机进行拍快照备份:在使用过程中,如果没有太大变化,恢复网络正常的快照一般是能解决问题的,但是要记得恢复快照之前要备份你已经修改过的所有东西,以防 ...

  8. 菜鸟教程 Missing parentheses in call to 'print'

    个人博客 地址:http://www.wenhaofan.com/article/20180618180327 >>> print "hello" SyntaxE ...

  9. Java大全-吐血整理

    gqzdev

  10. TCL 包

    包用于创建代码的可重用单元. 程序包提供特定功能的文件集合. 1.创建代码 2.创建包index 打开tclsh,切换到HelloWorld目录,并使用pkg_mkindex 命令创建索引文件. %c ...