1 创建并使用
1.1 下载所需要的包
npm i @amap/amap-jsapi-loader
1.2 创建与使用展示
<template>
<!-- <div>
<div id="container">
<div id="panel"></div>
</div>
</div> -->
<div class="map-content">
<div id="container" class="map"></div>
<div id="panel" @click="routePlanning">测试按钮</div>
</div>
<!-- <div class="info">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text" style="width:8rem;">请输入关键字</span>
</div>
<input id='tipinput' type="text">
</div> -->
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
// 设置安全密钥
securityJsCode: "",
};
//下载自官网示例数据 http://a.amap.com/Loca/static/mock/districts.js
const districts = [];
export default {
data() {
return {
map: "",
path1: [],
path2: [],
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.Scale", // 比例尺
"AMap.Transfer",
"AMap.StationSearch",
"AMap.ToolBar", // 添加右下角的放大缩小
"AMap.Driving",
"AMap.PlaceSearch",
"AMap.Geolocation",
"AMap.HawkEye", // 鹰眼，显示缩略图
"AMap.MapType", // 添加右上角的标准图和卫星图 和路况
"AMap.Weather",
"AMap.controlBar", // 方向盘
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("container", {
viewMode: "2D", // 是否为3D地图模式
zoom: 13, // 初始化地图级别
center: [113.65553, 34.748764], //中心点坐标 郑州
resizeEnable: true,
isHotspot: true, // 开启地图的热点功能 (站点详情)
});
this.siteDetails();
// 地图加载完成事件
this.map.on("complete", function () {
let a = 'abcdefg,'
a = a.replace(/[abc,]/gi, '')
console.log(a);
console.log("地图加载完成！");
});
// showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
// dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
// keyboardEnable: false, //地图是否可通过键盘控制，默认为true
// doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
// zoomEnable: false, //地图是否可缩放，默认值为true
// rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
// 交互控制
// this.map.setStatus({
// dragEnable: true,
// keyboardEnable: true,
// doubleClickZoom: true,
// zoomEnable: true,
// rotateEnable: true,
// });
//使用CSS默认样式定义地图上的鼠标样式
this.map.setDefaultCursor("pointer");
// 点击获取经纬度
this.map.on("click", function (e) {
console.log("经度", e.lnglat.getLng());
console.log("纬度", e.lnglat.getLat());
});
this.map.addControl(new AMap.ToolBar());
this.map.addControl(new AMap.MapType());
this.map.addControl(new AMap.Scale());
// this.map.addControl(new AMap.Transfer())
this.map.addControl(new AMap.Geolocation());
this.map.addControl(new AMap.HawkEye());
// this.map.addControl(new AMap.controlBar()) // 方向盘
// this.map.addControl(new AMap.StationSearch())
// this.getRoute() // 获取线路规划
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: "RB",
});
geolocation.getCurrentPosition(function (status, result) {
console.log(status, result);
if (status == "complete") {
onComplete(result);
} else {
onError(result);
}
});
function onComplete(data) {
// data是具体的定位信息
}
function onError(data) {
// 定位出错
}
})
.catch((e) => {
// console.log(e)
});
},
// ----------------------------------------------------------------
//地图移动与缩放事件
logMapinfo() {
// 移动事件
this.map.on("moveend", () => {
console.log("当前地图级别", this.map.getZoom());
// lng, lat 代表经纬度
console.log("当前地图中心位置", this.map.getCenter());
});
// 缩放事件
this.map.on("zoomend", () => {
console.log("当前地图级别", this.map.getZoom());
console.log("当前地图中心位置", this.map.getCenter());
});
},
// 设置经纬度
steupMap() {
this.map.setCenter([lng, lat]); //设置地图中心点
this.map.setZoom(zoom); //设置地图层级
},
// 获取地图当前行政区
getMapCity() {
this.map.getCity((e) => {
console.log("当前行政区", e);
});
},
// 设置地图当前行政区
setCityMap() {
//可以是cityname、adcode、citycode
// 现在默认郑州市 输入对应行政区 可模糊输入
this.map.setCity("北京市");
},
// 设置/获取地图显示范围
rangeMap() {
console.log("获取", this.map.getBounds());
// 设置
var mybounds = new AMap.Bounds(
[116.319665, 39.855919],
[116.468324, 39.9756]
);
this.map.setBounds(mybounds);
},
//限制/取消地图显示范围
lockMapBounds() {
//获取地图显示范围
var bounds = this.map.getBounds();
//限制地图显示范围
this.map.setLimitBounds(bounds);
//取消地图显示限制
this.map.clearLimitBounds();
},
// 地图的平移
translation() {
// 平移像素值
// this.map.panBy(50, 100);
// 移至指定位置
// map.panTo([116.405467, 39.907761]);
},
// 地图的热点功能 (站点详情)
siteDetails() {
// let placeSearch = new AMap.PlaceSearch(); //构造地点查询类
// let infoWindow = new AMap.InfoWindow({}); //创建信息窗体
// let maps = this.map;
// //鼠标经过
// this.map.on("hotspotover", function (result) {
// placeSearch.getDetails(result.id, function (status, result) {
// if (status === "complete" && result.info === "OK") {
// let poiArr = result.poiList.pois;
// let location = poiArr[0].location;
// //信息窗体内容
// let dialog = [];
// dialog.push(
// '<div class="info-title">' +
// poiArr[0].name +
// '</div><div class="info-content">' +
// "地址：" +
// poiArr[0].address
// );
// dialog.push("电话：" + poiArr[0].tel);
// dialog.push("类型：" + poiArr[0].type);
// dialog.push("<div>");
// dialog.join("<br>");
// // 向信息框体添加内容
// infoWindow.setContent(dialog);
// // 打开信息框体
// infoWindow.open(maps, location);
// }
// });
// });
},
// 构造点标记/矢量圆形
signMap() {
// 构造点标记
let marker = new AMap.Marker({
// 标记的样式
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
// 标记点的经纬度
position: [113.65553, 34.748764],
anchor: "bottom-center",
});
// 构造矢量圆形
var circle = new AMap.Circle({
center: new AMap.LngLat("113.65553", "34.748764"), // 圆心位置
radius: 1000, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35, //填充透明度
});
// 添加标记
this.map.add(marker);
this.map.add(circle);
// 移除标记
// this.map.remove(marker);
// this.map.remove(circle);
// 自动适配到合适视野范围
// 无参数，默认包括所有覆盖物的情况
this.map.setFitView();
},
// 路线规划
routePlanning() {
//构造路线导航类
var driving = new AMap.Driving({
map: this.map,
panel: "panel",
});
// 根据起终点名称规划驾车导航路线
driving.search(
[
{ keyword: "郑州动物园(公交站)", city: "郑州" },
{ keyword: "郑州人民公园(地铁站)", city: "郑州" },
],
function (status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
console.log("绘制驾车路线完成");
} else {
console.log("获取驾车数据失败：" + result);
}
}
);
},
},
};
</script>
<style scoped lang="less">
.map {
height: 100vh;
}
.map-content {
position: relative;
}
#panel {
position: absolute;
top: 0;
right: 0;
&:hover {
cursor: pointer;
}
}
.info-title {
font-weight: bolder;
color: #000;
font-size: 14px;
width: 250px;
height: 250px;
line-height: 26px;
padding: 0 0 0 6px;
background-color: pink;
}
.info-content {
width: 250px;
padding: 4px;
color: #666666;
line-height: 23px;
font: 12px Helvetica, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", Arial;
}
</style>
网友评论