1、原生js使用
1.1、引入js
去高德开发者平台创建一个自己key，具体步骤官网有。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
1.2、设置地图容器
<div id="container"></div>
这是个全屏地图
html, body{
width:100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 16px;
}
#container {
width:100%;
height: 100%;
}
1.3、设置地图初始位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="map.css" rel="stylesheet" type="text/css">
<title>高德地图</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
var map = new AMap.Map('container', {
zoom:12, // 缩放级别
center: [113.397428, 23.2], // 中心点坐标,广州
});
</script>
</body>
</html>
默认点标记
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
position: new AMap.LngLat(113.397428, 23.2), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: '默认图标'
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
自定义点标记
在设置图片地址image时，地址需要本地或者带绝对路径的地址，不然找不到。
let lonlat = [Math.random() + 113, Math.random() + 23]; // 随机生成经纬度
// 创建 AMap.Icon 实例：
const icon = new AMap.Icon({
size: new AMap.Size(33, 43), // 图标尺寸
image: require('@/assets/images/map-marker-jinji-select.png'), // Icon的图像
imageSize: new AMap.Size(33, 43), // 根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
let marker = new AMap.Marker({
position: new AMap.LngLat(lonlat[0], lonlat[1]),
offset: new AMap.Pixel(-10, -10),
icon: icon, // 添加 Icon 实例
title: '自定义图标',
zoom: 13
});
map.add(marker);
信息窗口
因为默认样式不满足需求，所以要自定义样式，在初始化InfoWindow时加上isCustom: true则可以使用自定义窗体
infoWindow = new AMap.InfoWindow({
isCustom: true, // 使用自定义窗体
content: this.createInfoWindow(title, content),
offset: new AMap.Pixel(16, -45),
});
createInfoWindow(title, content) {
const info = document.createElement('div');
info.className = 'custom-info input-card content-window-card';
// 可以通过下面的方式修改自定义窗体的宽高
// info.style.width = "400px";
// 定义顶部标题
const top = document.createElement('div');
const titleD = document.createElement('div');
// const closeX = document.createElement('img');
top.className = 'info-top';
titleD.innerHTML = title;
top.appendChild(titleD);
// top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
const middle = document.createElement('div');
middle.className = 'info-middle';
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
const bottom = document.createElement('div');
bottom.className = 'info-bottom';
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
const sharp = document.createElement('img');
sharp.src = 'https://webapi.amap.com/images/sharp.png';
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
},
css
不要加scoped,否则不生效
#container {
width: 100%;
height: 100%;
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px #fff;
background-color: #fff;
padding: 14px 16px;
border-radius: 8px;
box-shadow:0px 8px 16px rgba(9, 15, 23, 0.2);
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
}
div.info-top div {
display: inline-block;
color: #3C4858;
font-size: 16px;
// line-height: 31px;
margin-bottom: 16px;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
top: 15px;
z-index: 104;
}
.info-middle img {
float: left;
margin-right: 6px;
width: 768px;
}
}
指定信息窗口显示位置
窗口默认显示位置在地图右下角，现在要求显示在点击的点标记正上方，用下述代码就行了
that.infoWindow.open(this.map, this.marker.getPosition());
找了张别人的图片，类似这样
海量点标记
https://lbs.amap.com/demo/jsapi-v2/example/mass-markers/massmarks
// 图标数组
var style = [{
url: require('@/assets/images/map-marker-jinji-normal.png'),
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11),
}, {
url: require('@/assets/images/map-marker-jinji-normal.png'),
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(7, 7),
}, ];
// 城市数据点
var citys = [{
"lnglat": [122.06957, 41.124484],
"name": "盘锦市",
"style": 1
}, {
"lnglat": [123.18152, 41.269402],
"name": "辽阳市",
"style": 1
}, {
"lnglat": [111.670801, 40.818311],
"name": "呼和浩特市",
"style": 0
}, {
"lnglat": [117.283042, 31.86119],
"name": "合肥市",
"style": 0
}, ]
//创建点位
var mass = new AMap.MassMarks(citys, {
opacity: 0.8,
zIndex: 111,
cursor: 'pointer',
style: style
});
var marker = new AMap.Marker({content: ' ', map: map});//创建一个普通Marker点
//绑定移入事件
mass.on('mouseover', function (e) {
marker.setPosition(e.data.lnglat);
});
mass.setMap(map);//把massMarks 添加到地图实例
鼠标移入单个海量点标记，更换图标
mapSjysStyle: [
// 默认图标
{
url: require('@/assets/images/marker.png'),
anchor: new AMap.Pixel(20, 20),
size: new AMap.Size(40, 40),
},
// 划过时的图标
{
url: require('@/assets/images/marker_hover.png'),
anchor: new AMap.Pixel(20, 20),
size: new AMap.Size(40, 40),
},
],
// 海量点标记
const that = this;
const dataList= JSON.parse(JSON.stringify(that.dataList));
that.massSjys = new AMap.MassMarks(dataList, {
// opacity: 0.8,
zIndex: 100,
cursor: 'pointer',
style: that.mapSjysStyle,
});
// 移入显示点标记
that.mass.on('mouseover', (e) => {
// 移入更换图标
e.data.style = 1;
})
that.mass.on('mouseout', (e) => {
// 移入更换成默认图标
e.data.style = 0;
});
that.map.add(that.mass);
that.map.setFitView(that.mass);
鼠标移入点标记，显示图片窗体
AMap.event.addListener(that.marker, 'mouseover', () => {
infoWindow.open(that.map, that.marker.getPosition());
});
鼠标离开点标记，隐藏图片窗体
AMap.event.addListener(that.marker, 'mouseout', () => {
map.clearInfoWindow();
});
画一条线
https://lbs.amap.com/demo/javascript-api/example/overlayers/polyline-draw-and-edit
var path = [
[116.403322, 39.920255],
[116.410703, 39.897555],
[116.402292, 39.892353],
[116.389846, 39.891365]
]
var polyline = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})
map.add([polyline]);
map.setFitView();
画一堆线
https://lbs.amap.com/demo/jsapi-v2/example/overlayers/polyline-draw
datalist = [
[
[
116.32873535156249,
40.01499435375046
],
[
116.52099609375,
40.019201307686785
],
[
116.49902343749999,
40.12849105685408
]
],
[
[
116.66931152343749,
40.0360265298117
],
[
116.72973632812499,
40.14948820651523
],
[
116.81213378906249,
40.01499435375046
]
]
]
lineList = [];
datalist.forEach((item, index) => {
lineList.push(
new AMap.Polyline({
path: item,
isOutline: true,
outlineColor: '#FFC77B',
borderWeight: 1,
strokeColor: '#FFC77B',
strokeOpacity: 1,
strokeWeight: 3,
// 折线样式还支持 'dashed'
strokeStyle: 'solid',
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
// cursor: 'pointer',
zIndex: 3,
// 自定义属性 业务数据信息
extData: datalist[index],
}),
);
});
map.add(lineList);
// 缩放地图到合适的视野级别
map.setFitView(lineList );
鼠标移入线，让线高亮，显示信息窗体；移出线，线恢复颜色，隐藏信息窗体
// 移入线 让线高亮 显示信息窗体
lineList .forEach((item, index) => {
item.on('mouseover', (e) => {
const datas = e.target.getExtData();
// 缩放地图到合适的视野级别
// this.map.setFitView([item]);
// 当折线被点击时，改变颜色，注意要写上zIndex
item.setOptions({
outlineColor: '#FF4E4E',
strokeColor: '#FF4E4E',
zIndex: 20,
});
const title = '<div class="info-title">信息</div>';
const content = `名称：${datas.name}`;
that.infoWindow = new AMap.InfoWindow({
isCustom: true, // 使用自定义窗体
content: that.createInfoWindow(title, content),
offset: new AMap.Pixel(16, -45),
});
// 找出这条线上第一个点的坐标，作为信息窗体显示的位置，这块需要自己改
const zuobiao = [
this.datalist[index].coordsList[0].lng,
this.datalist[index].coordsList[0].lat,
];
console.log(66666, zuobiao);
// 鼠标移入点标记，显示图片窗体
that.infoWindow.open(that.map, zuobiao);
});
item.on('mouseout', (e) => {
const mycolor = this.getPolineColor(this.SjysDatalist, e.target.getExtData().ndbkvIndex);
// 移出线，恢复默认色
item.setOptions({
outlineColor: mycolor,
strokeColor: mycolor,
zIndex: 20,
});
// 鼠标离开线，隐藏图片窗体
that.map.clearInfoWindow();
});
});
所有code
const icon = new AMap.Icon({
size: new AMap.Size(33, 43), // 图标尺寸
image: require('@/assets/images/map-marker-jinji-select.png'), // Icon的图像
imageSize: new AMap.Size(33, 43), // 根据所设置的大小拉伸或压缩图片
});
const feiIcon = new AMap.Icon({
size: new AMap.Size(33, 43), // 图标尺寸
image: require('@/assets/images/map-marker-feijinji-select.png'), // Icon的图像
imageSize: new AMap.Size(33, 43), // 根据所设置的大小拉伸或压缩图片
});
export default {
name: 'mapview',
data() {
return {
map: null,
marker: null, // 地图容器
moren: require('@/assets/images/img-table-nopic.png'),
mapStyle: [
{
url: require('@/assets/images/map-marker-jinji-normal.png'),
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(10, 10),
},
{
url: require('@/assets/images/map-marker-feijinji-normal.png'),
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(10, 10),
},
],
};
},
// 构建自定义信息窗体
createInfoWindow(title, content) {
const info = document.createElement('div');
info.className = 'custom-info input-card content-window-card';
// 可以通过下面的方式修改自定义窗体的宽高
// info.style.width = "400px";
// 定义顶部标题
const top = document.createElement('div');
const titleD = document.createElement('div');
// const closeX = document.createElement('img');
top.className = 'info-top';
titleD.innerHTML = title;
top.appendChild(titleD);
// top.appendChild(closeX);
info.appendChild(top);
// 定义中部内容
const middle = document.createElement('div');
middle.className = 'info-middle';
middle.style.backgroundColor = 'white';
middle.innerHTML = content;
info.appendChild(middle);
// 定义底部内容
const bottom = document.createElement('div');
bottom.className = 'info-bottom';
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
const sharp = document.createElement('img');
sharp.src = 'https://webapi.amap.com/images/sharp.png';
bottom.appendChild(sharp);
info.appendChild(bottom);
return info;
},
// 地图
mapFun() {
const that = this;
that.map = new AMap.Map('container', {
zoom: 13,
center: [that.diseaseList[0].jingdu, that.diseaseList[0].weidu],
});
if (!that.diseaseList) return;
const diseaseList = JSON.parse(JSON.stringify(this.diseaseList));
// 转为MassMarks需要的数据格式
diseaseList.map((itsm) => {
const obj = itsm;
obj.lnglat = [obj.jingdu, obj.weidu]; // 经纬度数组 点标记位置
obj.style = obj.fenleimch === '急' ? 0 : 1;
return obj;
});
// 海量点标记
const mass = new AMap.MassMarks(diseaseList, {
opacity: 0.8,
zIndex: 1,
cursor: 'pointer',
style: that.mapStyle,
});
// 点标记
that.marker = new AMap.Marker({
position: new AMap.LngLat(diseaseList[0].jingdu, diseaseList[0].weidu),
offset: new AMap.Pixel(-17, -33),
icon: diseaseList[0].fenleimch === '非' ? feiIcon : icon, // 添加 Icon 实例
zIndex: 22,
// map: that.map,
});
// 移入显示点标记，显示marker,弹出自定义的信息窗体
mass.on('mouseover', (e) => {
const icons = e.data.fenleimch === '非' ? feiIcon : icon; // 选中的图标
that.marker.setIcon(icons); // 设置点标记的显示图标，
that.marker.setPosition(e.data.lnglat); // 设置覆盖物位置
that.map.add(that.marker);
const title = `<span style="font-weight:bold;font-size:18px;color:#1B222C">${e.data.leixingmch}</span> ${e.data.jingdu},${e.data.weidu} ${e.data.shijian}`;
const content = `<img src='${e.data.tupian ? this.$website.imagesUrl + e.data.tupian : that.moren}'
class='${e.data.tupian ? 'normal-img' : 'error-img'}'>
`;
that.infoWindow = new AMap.InfoWindow({
isCustom: true, // 使用自定义窗体
content: that.createInfoWindow(title, content),
offset: new AMap.Pixel(16, -45),
});
// 鼠标移入点标记，显示图片窗体
that.infoWindow.open(that.map, that.marker.getPosition());
});
mass.on('mouseout', () => {
// 鼠标离开点标记，隐藏图片窗体
that.map.clearInfoWindow();
// 鼠标离开点标记，隐藏图标标记
that.marker.setMap(null);
});
// that.map.setFitView();
mass.setMap(that.map);
},
// 画事件统计折线
AddSjtjPolyline() {
const that = this;
this.SjtjPolylineList = [];
this.SjtjLineDatalist.forEach((item, index) => {
this.SjtjPolylineList.push(
new AMap.Polyline({
path: item.coordsList,
isOutline: true,
outlineColor: '#FFC77B',
borderWeight: 1,
strokeColor: '#FFC77B',
strokeOpacity: 1,
strokeWeight: 3,
// 折线样式还支持 'dashed'
strokeStyle: 'solid',
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
// cursor: 'pointer',
zIndex: 3,
// 自定义属性 业务数据信息
extData: this.SjtjLineDatalist[index],
}),
);
});
// 移入线 让线高亮 显示信息窗体
this.SjtjPolylineList.forEach((item, index) => {
item.on('mouseover', (e) => {
console.log(333333333333, e.target.getExtData());
const datas = e.target.getExtData();
// 当折线被点击时，改变颜色，注意要写上zIndex
item.setOptions({
outlineColor: '#FF4E4E',
strokeColor: '#FF4E4E',
zIndex: 20,
});
const title = '<div class="info-title">事件信息</div>';
const content = `${datas.brief}<br /> ${datas.eventDesc},<br /> ${datas.startTime}`;
that.infoWindow = new AMap.InfoWindow({
isCustom: true, // 使用自定义窗体
content: that.createInfoWindow(title, content),
offset: new AMap.Pixel(16, -45),
});
const zuobiao = [
this.SjtjLineDatalist[index].coordsList[0].lng,
this.SjtjLineDatalist[index].coordsList[0].lat,
];
console.log(66666, zuobiao);
// 鼠标移入点标记，显示图片窗体
that.infoWindow.open(that.map, zuobiao);
});
item.on('mouseout', () => {
// 移出线，恢复默认色
item.setOptions({
outlineColor: '#FFC77B',
strokeColor: '#FFC77B',
zIndex: 20,
});
// 鼠标离开线，隐藏图片窗体
that.map.clearInfoWindow();
});
});
this.map.add(this.SjtjPolylineList);
// 缩放地图到合适的视野级别
this.map.setFitView(this.SjtjPolylineList);
},
// 隐藏事件统计折线
hideSjtjPolyline() {
this.SjtjPolylineList.forEach((item) => {
item.hide();
});
},
// 显示事件统计折线
showSjtjPolyline() {
// 缩放地图到合适的视野级别
this.map.setFitView(this.SjtjPolylineList);
this.SjtjPolylineList.forEach((item) => {
item.show();
});
},
等待地图加载完成
this.map.on('complete', () => {
this.middleDieaseListWarn(params)
})
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
