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>
原文地址：https://www.cnblogs.com/-Kam/p/11719430.html
时间： 2024-10-13 08:56:06