下面是自己在使用高德地图后的总结,方便日后查看
使用高德地图首先需要引入:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.CustomLayer,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.DistrictSearch,AMap.Geocoder,AMap.MouseTool,AMap.Driving"></script>
需要注意的是申请完后注意的安全密钥,key值需要配合安全密钥使用,不然某些功能无法使用,例如根据关键字搜索
在这里按照操作申请key值和对安全密钥的配置
页面效果:
通过点击添加点位、绘制折线、绘制多边形、绘制矩形和绘制圆形来开启对应的工具类进行添加覆盖物。
点击清除手动添加的覆盖物清除通过工具类添加的覆盖物。
点击清除默认添加的覆盖物清除初始化时添加的覆盖物。(或者清除不是通过工具类添加的覆盖物)
清除覆盖物操作可根据条件判断清除某一类或者某一个或全部,对于清除全部请阅读官方文档。
下面是代码,可以直接复制后自己实验
我对高德地图的容器#container设置的宽高为100%,不显示地图请查看#container元素的高度
<template>
<div id="container">
<div class="button_click">
<el-button @click="addMouseToolClick('marker')" type="primary" size="mini">添加点位</el-button>
<el-button @click="addMouseToolClick('polyline')" type="primary" size="mini">绘制折线</el-button>
<el-button @click="addMouseToolClick('polygon')" type="primary" size="mini">绘制多边形</el-button>
<el-button @click="addMouseToolClick('rectangle')" type="primary" size="mini">绘制矩形</el-button>
<el-button @click="addMouseToolClick('circle')" type="primary" size="mini">绘制圆形</el-button>
<el-button @click="clearClick" type="primary" size="mini">清除手动添加的覆盖物</el-button>
<el-button @click="clear" type="primary" size="mini">清除默认添加的覆盖物</el-button>
<el-input v-model="input" placeholder="请输入内容" style="margin-left:20px;"></el-input>
<el-button @click="search" type="primary" size="mini">搜索</el-button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
map:'',
satellite:'',
tileLayer:'',
marker:'',
markers:[],
infoWindow:'',
polyline:'',
polylines:[],
polygon:'',
polygons:[],
rectangle:'',
rectangles:[],
circle:'',
circles:[],
mouseTool:'',
mouseToolList:[],
type:'',
input:'',
markerList:[
[119.155623,35.406421],[119.166523,35.395437],[119.184977,35.399355],[119.197336,35.412647],[119.178797,35.413556]
],
polylineList:[
[[119.147726, 35.411598],[119.150559, 35.400824],[119.167467, 35.402713],[119.172102, 35.40845],[119.177681, 35.400614]],
[[119.169613, 35.415445],[119.177424, 35.40789],[119.182059, 35.407121],[119.180256, 35.403763]],
[[119.182488, 35.411808],[119.189783, 35.40831],[119.193131, 35.416075],[119.209782, 35.416214]]
],
polygonList:[
[[119.143091, 35.394947],[119.141546, 35.384521],[119.152619, 35.38816]],
[[119.140688, 35.381792],[119.140516, 35.371435],[119.151589, 35.371155],[119.152533, 35.381372]],
[[119.147383, 35.369055],[119.145666, 35.365766],[119.141718, 35.365486],[119.14558, 35.363666],[119.143349, 35.361636],[119.14704, 35.362826],[119.149014, 35.361076],[119.148842, 35.363806],[119.15382, 35.364856],[119.148585, 35.365696]]
],
rectangleList:[
{southWest:[119.175965, 35.381162],northEast:[119.185492, 35.390469]},
{southWest:[119.157339, 35.383402],northEast:[119.167381, 35.391309]},
{southWest:[119.159914, 35.373114],northEast:[119.181887, 35.379483]}
],
circleList:[
{center:[119.196564, 35.367445],radius:924.059},
{center:[119.198281, 35.38823],radius:1109.610},
{center:[119.20961, 35.376754],radius:414.997},
]
}
},
mounted(){
this.$nextTick(()=>{
this.startMap()
})
},
methods:{
startMap() {
//创建高德地图对象
this.map = new AMap.Map('container', {
resizeEnable: true,
zoom: 14,
features : ['bg','point','road','building'],
center: [119.21476,35.390924],
zooms: [3, 16],
mapStyle: "amap://styles/normal",
});
//卫星切片图层对象
// this.satellite = new AMap.TileLayer.Satellite({
// map: this.map,
// });
//普通图层
this.tileLayer = new AMap.TileLayer({
map: this.map,
});
this.addMarker()
this.addPolyline()
this.addPolygon()
this.addRectangle()
this.addCircle()
this.map.on('click', this.showInfoClick);//点击地图触发的方法
this.mouseTool = new AMap.MouseTool(this.map)//创建工具类对象
this.mouseTool.on('draw',this.mouseToolClick)//工具类添加完成后触发的方法
},
showInfoClick(e) {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
},
// 添加marker点
addMarker(){
let startIcon=new AMap.Icon({
size:new AMap.Size(20,20),
image:require('/public/images/wastwater.png'),
imageSize:new AMap.Size(20,20),
imageOffset:new AMap.Pixel(0,0)
})
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
zIndex: 200,
});
this.markerList.forEach((item,index)=>{
let html=`高德地图Marker${index+1}的信息窗`
this.marker = new AMap.Marker({
map: this.map,
icon: startIcon,
position: item,
offset: new AMap.Pixel(-13, -30),
content:'<div class="markerClass"></div>',//自定义覆盖物,
label: {
zIndex: 52,
content: `高德地图Marker${index+1}`,
offset: new AMap.Pixel(24, 0),
},
});
this.marker.on('click', this.markerClick);
this.marker.content = html;
this.markers.push(this.marker);
})
},
//marker点的信息窗
markerClick(e){
this.infoWindow.setContent(e.target.content);
this.infoWindow.open(this.map, e.target.getPosition());
},
addPolyline(){
this.polylineList.forEach(item=>{
this.polyline=new AMap.Polyline({
map: this.map,
path:item,
strokeColor:'#1dfdcc',//线条颜色
strokeOpacity:1,//透明度[0-1]
strokeWeight:3,//线条宽度
})
this.polylines.push(this.polyline)
})
},
addPolygon(){
this.polygonList.forEach(item=>{
this.polygon=new AMap.Polygon({
map:this.map,
path:item,
strokeColor:'#a900fb',//线条颜色
strokeOpacity:1,//线条透明度[0-1]
strokeWeight:3,//线条宽度
fillColor:'#a900fb',//多边形的填充色
fillOpacity:0.5,//填充色透明度
})
this.polygons.push(this.polygon)
})
},
addRectangle(){
this.rectangleList.forEach(item=>{
let southWest=new AMap.LngLat(item.southWest[0],item.southWest[1])
let northEast=new AMap.LngLat(item.northEast[0],item.northEast[1])
let bounds=new AMap.Bounds(southWest,northEast)
this.rectangle=new AMap.Rectangle({
map:this.map,
bounds:bounds,
strokeColor:'#f78d01',//线条颜色
strokeOpacity:1,//线条透明度[0-1]
strokeWeight:3,//线条宽度
fillColor:'#f78d01',//矩形的填充色
fillOpacity:0.5,//填充色透明度
})
this.rectangles.push(this.rectangle)
})
},
addCircle(){
this.circleList.forEach(item=>{
this.circle=new AMap.Circle({
// map:this.map,
center:item.center,
radius:item.radius,
strokeColor:'#12ff12',//线条颜色
strokeOpacity:1,//线条透明度[0-1]
strokeWeight:3,//线条宽度
fillColor:'#12ff12',//圆形的填充色
fillOpacity:0.5,//填充色透明度
})
this.circle.setMap(this.map)
this.circles.push(this.circle)
})
},
clear(){
this.map.remove(this.markers)
this.map.remove(this.polylines)
this.map.remove(this.polygons)
this.map.remove(this.rectangles)
this.map.remove(this.circles)
},
addMouseToolClick(type){
this.type=type
switch(type){
case 'marker'://工具类点标记添加
this.mouseTool.marker({
icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
offset: new AMap.Pixel(-12, -17),
});
break;
case 'polyline'://工具类折线添加
this.mouseTool.polyline({
strokeColor:'#00d8ff',//线条颜色
strokeOpacity:1,//透明度[0-1]
strokeWeight:3,//线条宽度
});
break;
case 'polygon'://工具类多边形添加
this.mouseTool.polygon({
strokeColor:'#01a1ed',//线条颜色
strokeOpacity:1,//线条透明度[0-1]
strokeWeight:3,//线条宽度
fillColor:'#01a1ed',//多边形的填充色
fillOpacity:0.5,//填充色透明度
});
break;
case 'rectangle'://工具类矩形添加
this.mouseTool.rectangle({
strokeColor:'#eeff24',//线条颜色
strokeOpacity:1,//线条透明度[0-1]
strokeWeight:3,//线条宽度
fillColor:'#eeff24',//矩形的填充色
fillOpacity:0.5,//填充色透明度
});
break;
case 'circle'://工具类圆形添加
this.mouseTool.circle({
strokeColor:'#12ff12',//线条颜色
strokeOpacity:1,//线条透明度[0-1]
strokeWeight:3,//线条宽度
fillColor:'#12ff12',//圆形的填充色
fillOpacity:0.5,//填充色透明度
});
break;
default: break;//其他工具类都差不多的操作
}
},
clearClick(){
// if (this.mouseTool.overlays.marker) this.map.remove(this.mouseTool.overlays.marker);
//意思为如果当前是点标记的添加就清除之前添加的点标记
this.map.remove(this.mouseTool.overlays.marker);//清除所有 通过添加点标记工具 添加的点标记
this.map.remove(this.mouseTool.overlays.polyline);//清除所有 通过添加折线工具 添加的线条
this.map.remove(this.mouseTool.overlays.polygon);//清除所有 通过添加多边形工具 添加的多边形
this.map.remove(this.mouseTool.overlays.rectangle);//清除所有 通过添加矩形工具 添加的矩形
this.map.remove(this.mouseTool.overlays.circle);//清除所有 通过添加圆形工具 添加的圆形
// this.map.remove(this.mouseToolList)
//清除操作 对应下方在工具类添加完成时(push)保存的对象
},
mouseToolClick(e){
if(this.type==='marker'){
this.mouseToolList.push(e.obj)
//保存添加的覆盖物对象,用于后续操作,如果仅仅只是用来清除添加的覆盖物,在这里可以不需要写,用清除手动添加的覆盖物按钮触发的方法比较简单
let position=[e.obj._opts.position.lng,e.obj._opts.position.lat]
console.log(position)
// this.map.setZoomAndCenter(14, position)
//把添加的点位设置为地图的中心点
}else if(this.type==='polyline'){
let position=[]
e.obj._opts.path.forEach(item=>{
position.push([item[0],item[1]])
})
console.log(position)
}else if(this.type==='polygon'){
let position=[]
e.obj._opts.path.forEach(item=>{
position.push([item[0],item[1]])
})
console.log(position)
}else if(this.type==='rectangle'){
let bounds=e.obj._opts.bounds
let position={
southWest:[bounds.southWest.lng,bounds.southWest.lat],
northEast:[bounds.northEast.lng,bounds.northEast.lat],
}
console.log(position);
}else if(this.type==='circle'){
console.log(e);
let opts=e.obj._opts
let position={
center:[opts.center.lng,opts.center.lat],
radius:opts.radius
}
console.log(position);
}
},
search(){
this.autoInput(this.input)
},
autoInput(val) {
console.log(val);
var that = this;
AMap.plugin('AMap.PlaceSearch', function() {
var autoOptions = {
city: '全国',
}
var placeSearch = new AMap.PlaceSearch(autoOptions);
placeSearch.search(val, function(status, result) {
console.log(result);
var longitude = result.poiList.pois[0].location.lng;
var latitude = result.poiList.pois[0].location.lat;
var position = (longitude + ',' + latitude).split(',');
that.searchMarker(position);
})
})
},
searchMarker(position) {
this.map.setZoomAndCenter(14, position)
},
}
}
</script>
<style lang="scss">
.markerClass {
// margin-left: 100px;
// margin-top: 100px;
width: 22px;
height: 22px;
/*transform: translate3d(0px, 0px, 0px);*/
position: relative;
outline: none;
// background-color: #dd524d;
background-image: url("../../../public/images/wastwater.png");
box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
// border-radius: 100%;
transform-origin: 0 0;
display: block;
opacity: 0.7;
}
.markerClass::after {
content: "";
-webkit-border-radius: 100%;
border-radius: 100%;
height: 300%;
width: 300%;
position: absolute;
margin: -100% 0 0 -100%;
box-shadow: 0 0 6px 2px #dd524d;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite; /*无穷反复*/
animation-delay: 1.1s;
}
@keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
filter: alpha(opacity=0);
}
50% {
opacity: 1;
filter: none;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
filter: alpha(opacity=0);
}
}
</style>
<style scoped>
#container{
width: 100%;
height: 100%;
}
.button_click{
position: absolute;
display: flex;
}
</style>