文档地址
/api/javascript-api/guide/abc/prepare
注册
到官网注册一下就可以了/并创建应用拿到key值
项目引入
<scripttype="text/javascript"src="/maps?v=1.4.15&key=你的key值"></script>
初始化
<template><div class="home"><div id="container"></div></div></template><script>export default {name: "Home",data() {return {};},mounted() {this.init();},methods: {init() {const AMap = window.AMap;const map = new AMap.Map("container", {mapStyle: "amap://styles/57e4cee92721bca404c743b14c9882fa",center: [116.39, 39.9],zoom: 11});// 标记点const marker = new AMap.Marker({position: [116.39, 39.9],title: "北京"});// 设置label标签marker.setLabel({offset: new AMap.Pixel(4, 4), //设置文本标注偏移量content: "<div class='info'>北京</div>", //设置文本标注内容direction: "right" //设置文本标注方位});// 将创建的点标记添加到已有的地图实例：map.add(marker);}}};</script><style lang="scss" scoped>#container {width: 100vw;height: 100vh;}</style>
多点标记并自适应居中
init() {const AMap = window.AMap;const map = new AMap.Map("container", {mapStyle: "amap://styles/57e4cee92721bca404c743b14c9882fa",center: [116.39, 39.9],zoom: 11});let list = [{position: [116.39, 39.9],title: "北京"},{position: [117.210391, 39.093791],title: "天津"}];let markers = [];list.forEach((item) => {let marker = new AMap.Marker(item);marker.setLabel({offset: new AMap.Pixel(4, 4), //设置文本标注偏移量content: `<div class='info'>${item.title}</div>`, //设置文本标注内容direction: "right" //设置文本标注方位});markers.push(marker);});// 将创建的点标记添加到已有的地图实例：map.add(markers);//地图自适应居中map.setFitView();}
绘制轨迹
// 绘制轨迹toDrawLine(map) {const path = [[116.39, 39.9],[116.408383, 39.739973],[116.698141, 39.562196],[116.808525, 39.49452],[117.04769, 39.391098],[117.04769, 39.391098],[117.213265, 39.094239],[117.210391, 39.093791]];new AMap.Polyline({map,path: path,strokeColor: "#00A", //线颜色strokeOpacity: 1, //线透明度strokeWeight: 3, //线宽strokeStyle: "solid", //线样式width: 20});}
自定义标记覆盖物
标记的代码
toMarkerCQWH(map) {let list = [{position: [114.430977, 30.612766],title: "武汉火车站",content: getTipHTML()},{position: [114.258289, 30.626785],title: "汉口火车站",content: getTipHTML()}];let markers = [];list.forEach((item) => {let marker = new AMap.Marker(item);// marker.setLabel({// content: getTipHTML() //设置文本标注内容// });markers.push(marker);});// 将创建的点标记添加到已有的地图实例：map.add(markers);},
覆盖物代码
import icon_warehouse from "@/assets/img/icon_warehouse.png";export function getTipHTML() {let html = `<div class="marker"><!-- 气泡 --><div class="marker-tip flex flex-column"><span>xxx仓库</span><span>xxx：30000吨</span><span>xxx：300元/吨</span><span>xxx：4300kCal</span></div><!-- 标记点 --><div class="marker-pointer flex align-center"><!-- <div class="marker-pointer-img flex-center"> --><imgclass="marker-pointer-img"src=${icon_warehouse}alt=""/><!-- </div> --><div class="marker-pointer-text">新街仓库</div></div></div>`;return html;}
标记的样式，这里需要注意我用vue+sass写在.vue文件中不生效，写到App.vue中可以
// 修改地图自带样式.amap-marker-label {border: none;background: transparent;position: relative;}.marker {position: absolute;top: -180px;left: -20px;}.marker-tip {width: 137px;height: 120px;padding: 8px 12px;background-image: url("~@/assets/img/bg_bubble.png");background-repeat: no-repeat;background-size: 137px 120px;margin-bottom: 4px;}.marker-tip span {color: #d9ecff;font-size: 12px;margin-bottom: 4px;}// 标记点.marker-pointer {width: 92px;height: 24px;font-size: 12px;color: #fa8c16;position: relative;background: #fff;border-radius: 19px;}.marker-pointer-img {width: 24px;height: 24px;margin-right: 4px;border-radius: 50%;}.marker-pointer:after {position: absolute;left: 10px;bottom: -14px;content: "";width: 3px;height: 14px;background: #fa8c16;}
效果，其他的代码上面有就不贴了
给标记添加点击事件
axios.get("https://xxxxxxxxxxx").then((res) => {const list = res.data.data;let markers = list.map((item) => {let marker = new AMap.Marker({position: [item.lng, item.lat],title: item.collieryName,content: getTipHTML({title: item.collieryName,id: item.collieryId,list: item.coalList,icon: 1,}),});// 添加点击事件marker.on("click", () => {let dom = document.querySelector(`.marker-tip-${item.collieryId}`);if (dom.style.display == "flex") {dom.style.display = "none";} else {dom.style.display = "flex";}});return marker;});state.markers = markers;// 将创建的点标记添加到已有的地图实例：state.map.add(markers);state.map.setFitView();});
删除标记和轨迹
注意需要在标记点和绘制轨迹的地方先将数据收集起来，才能清除。
// 清空线和标记点export function remove_pointer_line() {// 清空标记state.map.remove(state.markers);// 清空轨迹state.polylineList.forEach((item) => {state.map.remove(item);});}
轨迹回放
JSAPI2.0 使用覆盖物动画必须先加载动画插件
//需要先加载动画插件window.AMap.plugin("AMap.MoveAnimation",()=>{//起点const marker = new window.AMap.Marker({map: state.map,position: [109.925742, 38.590491],icon: "/images/car.png",offset: new window.AMap.Pixel(-26, -13),autoRotation: true,angle: -90});//监听移动并实时绘制轨迹marker.on("moving", (e) => {passedPolyline.setPath(e.passedPath);});// 开始轨迹回放marker.moveAlong(get_train_line(), {// 每一段的时长duration: 200,// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置autoRotation: true});})
海量点标注并添加自定义图层
//创建海量点图层function createCoverage(){// 创建图层const markers = [];const layer = new AMap.LabelsLayer({zooms: [3, 20],zIndex: 1000,collision: false,allowCollision: false});layer.add(markers);// 图层添加到地图state.map.add(layer);}// 海量点标记function toPointMore() {createCoverage()// 创建普通点用于点击时覆盖自定义图层var normalMarker = new AMap.Marker({anchor: "bottom-center",offset: [0, -15]});// 获取数据api_request().then((res) => {const list = res.data.data;// 多点标记数据处理let markers = list.map((item) => {let marker = new AMap.LabelMarker({position: [item.lng, item.lat],zIndex: 1000,title: item.name,text: {content: item.name,direction: "center",//海量点的样式style: {fontSize: 12,fontWeight: "normal",fillColor: "#fff",padding: "2, 5",backgroundColor: "rgb(246,137,38)",borderColor: "#fff",borderWidth: 1}}});// 添加点击事件，用于点击显示自定义图层marker.on("click", () => {// 先移除上一次的state.map.remove(normalMarker);normalMarker.setContent(getTipHTML({title: item.name,id:item.idlist,icon: active}));normalMarker.setPosition([item.lng, item.lat]);state.map.add(normalMarker);let dom = document.querySelector(`.marker-tip-${id}`);if (dom.style.display == "flex") {dom.style.display = "none";} else {dom.style.display = "flex";}});return marker;});state.markers = markers;// 将创建的点标记添加到已有的地图实例：state.map.add(markers);state.map.setFitView();});}
高德地图单点 多点标记 轨迹绘制 自定义标记覆盖物 给标记添加点击事件 移除所有标记和轨迹 轨迹回放功能
