整理一下学习高德地图的一些值得记录的地方
在一个未上线的项目里面所用到的前端的一些东西
这里是在vue里面写的
1.首先在index.html里面引入一下高德以及需要用到的一些东西，在plugin后面接就行。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3cad56f0514dcbc15e1da6a310c4e19f&plugin=AMap.DistrictSearch,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar,AMap.MarkerClusterer"></script>2.去掉左下方的高德logo
.amap-logo{
display: none;
opacity:0 !important;
}
.amap-copyright {
opacity:0;
}3.然后就是在地图左上方的切换图层的下方加上我们需要的几个显示的功能。
<div class="warpper_content_map" id="map_container">export default{
data() {
return {
map: null,
isLayer: true,
radio: "1",
gummMarker: [],
spjkMarker: [],
sbMarker:[],
dwMarker:[],
wrjMarker:[],
fhMarker:[]
};
},
methods:{
initMap(map) {
let _this = this
this.map = new AMap.Map('map_container', {
zoom: 7, // 缩放比例
cursor: 'hand', // 鼠标在地图上的表现形式，小手
center: [108.687156, 23.516975]
});
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
var layerCtrl2 = new BasicControl.LayerSwitcher({
// theme: 'dark',
//自定义基础图层
baseLayers: [{
enable: true,
id: 'tile',
name: '标准图',
layer: new AMap.TileLayer()
}, {
id: 'satellite',
name: '卫星图',
layer: new AMap.TileLayer.Satellite()
}],
//自定义覆盖图层
overlayLayers: [{
id: 'traffic',
name: '路况图',
layer: new AMap.TileLayer.Traffic()
}, {
enable: true,
id: 'roadNet',
name: '路网图',
layer: new AMap.TileLayer.RoadNet()
}]
});
_this.map = new AMap.Map('map_container', {
//这里将layerCtrl中启用的图层传递给map
layers: layerCtrl2.getEnabledLayers()
});
_this.map.addControl(layerCtrl2);
_this.map.setZoomAndCenter(7, [108.687156, 23.516975]);
//获取边界坐标点
AMap.plugin('AMap.DistrictSearch', () => {
var districtSearch = new AMap.DistrictSearch({
// 关键字对应的行政区级别，共有5种级别
level: 'province',
// 是否显示下级行政区级数，1表示返回下一级行政区
subdistrict: 0,
// 返回行政区边界坐标点
extensions: 'all'
});
// 搜索所有省/直辖市信息
districtSearch.search('广西', (status, result) => {
// 查询成功时，result即为对应的行政区信息
_this.handlePolygon(result);
});
});
$(".amap-ui-control-layer-overlays").after('<div class="amap-ui-control-layer-separator"></div>')
let _html = '<div class="amap-ui-control-layer-overlays ">' +
'<div class="amap-ui-control-layer-overlay-item checkboxItem">' +
'<label>' +
'<input type="checkbox" class="amap-ui-control-layer-selector" data-val="1"><span>终端在线</span></label>' +
'</div>' +
'<div class="amap-ui-control-layer-overlay-item checkboxItem">' +
'<label>' +
'<input type="checkbox" class="amap-ui-control-layer-selector" data-val="2"><span>古树名木</span></label>' +
'</div>' +
'<div class="amap-ui-control-layer-overlay-item checkboxItem">' +
'<label>' +
'<input type="checkbox" class="amap-ui-control-layer-selector" data-val="3"><span>视频监控</span></label>' +
'</div>' +
'<div class="amap-ui-control-layer-overlay-item checkboxItem">' +
'<label>' +
'<input type="checkbox" class="amap-ui-control-layer-selector" data-val="4"><span>物联网设备</span></label>' +
'</div>' +
'<div class="amap-ui-control-layer-overlay-item checkboxItem">' +
'<label>' +
'<input type="checkbox" class="amap-ui-control-layer-selector" data-val="5"><span>野生动物</span></label>' +
'</div>' +
'<div class="amap-ui-control-layer-overlay-item checkboxItem">' +
'<label>' +
'<input type="checkbox" class="amap-ui-control-layer-selector" data-val="6"><span>无人机</span></label>' +
'</div>' +
'<div class="amap-ui-control-layer-overlay-item checkboxItem">' +
'<label>' +
'<input type="checkbox" class="amap-ui-control-layer-selector" data-val="7"><span>防火分布</span></label>' +
'</div>' +
'</div>'
$(".amap-ui-control-layer-list").append(_html)
$('.checkboxItem label input').click(function() {
let val = $(this).data('val')
let _status = $(this).is(':checked')
if (val == 1) {
if (_status) {
_this.zdzaMarker = new AMap.Marker({
map: _this.map,
icon: 'http://dmzhlc.czyapi.com/img/icon_zd.png',
position: new AMap.LngLat(108.556519, 22.728785)
});
_this.zdzaMarker.setLabel({
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>邹行宇</div>", //设置文本标注内容
direction: 'center' //设置文本标注方位
});
} else {
_this.zdzaMarker.setMap(null);
}
} else if (val == 2) {
if (_status) {
for(var i = 0 ; i<100 ; i++){
var code = ""
var code1=""
for(var j = 1;j <= 6;j++){
const num = Math.floor(Math.random()*10);
code += num;
}
for(var x = 1;x <= 6;x++){
const num = Math.floor(Math.random()*10);
code1 += num;
}
var long = _this.GetRandomNum(107,109)+"."+code
var lati = _this.GetRandomNum(22,24)+"."+code1
// gmList.push({
// lnglat:[long,lati],
// name:"gx"+i,
// id:i
// })
let arr = new AMap.Marker({
map: _this.map,
icon: 'http://dmzhlc.czyapi.com/img/icon_gsmm.png',
position: new AMap.LngLat(long, lati)
})
arr.setLabel({
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>古树名木</div>", //设置文本标注内容
direction: 'center' //设置文本标注方位
});
_this.gummMarker.push(arr)
}
} else {
_this.gummMarker.forEach(e => {
e.setMap(null);
})
_this.gummMarker = []
// _this.gummMarker.setMap(null);
}
} else if (val == 3) {
if (_status) {
for(var i = 0 ; i<20 ; i++){
var code = ""
var code1=""
for(var j = 1;j <= 6;j++){
const num = Math.floor(Math.random()*10);
code += num;
}
for(var x = 1;x <= 6;x++){
const num = Math.floor(Math.random()*10);
code1 += num;
}
var long = _this.GetRandomNum(107,109)+"."+code
var lati = _this.GetRandomNum(22,24)+"."+code1
// gmList.push({
// lnglat:[long,lati],
// name:"gx"+i,
// id:i
// })
let arr = new AMap.Marker({
map: _this.map,
icon: 'http://dmzhlc.czyapi.com/img/icon_spjk.png',
position: new AMap.LngLat(long, lati)
})
arr.setLabel({
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>视频监控</div>", //设置文本标注内容
direction: 'center' //设置文本标注方位
});
_this.spjkMarker.push(arr)
}
} else {
_this.spjkMarker.forEach(e => {
e.setMap(null);
})
_this.spjkMarker = []
}
} else if (val == 4) {
if (_status) {
for(var i = 0 ; i<20 ; i++){
var code = ""
var code1=""
for(var j = 1;j <= 6;j++){
const num = Math.floor(Math.random()*10);
code += num;
}
for(var x = 1;x <= 6;x++){
const num = Math.floor(Math.random()*10);
code1 += num;
}
var long = _this.GetRandomNum(107,109)+"."+code
var lati = _this.GetRandomNum(22,24)+"."+code1
// gmList.push({
// lnglat:[long,lati],
// name:"gx"+i,
// id:i
// })
let arr = new AMap.Marker({
map: _this.map,
icon: 'http://dmzhlc.czyapi.com/img/icon_sb.png',
position: new AMap.LngLat(long, lati)
})
arr.setLabel({
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>物联网设备</div>", //设置文本标注内容
direction: 'center' //设置文本标注方位
});
_this.sbMarker.push(arr)
}
} else {
_this.sbMarker.forEach(e => {
e.setMap(null);
})
_this.sbMarker = []
}
} else if (val == 5) {
if (_status) {
for(var i = 0 ; i<20 ; i++){
var code = ""
var code1=""
for(var j = 1;j <= 6;j++){
const num = Math.floor(Math.random()*10);
code += num;
}
for(var x = 1;x <= 6;x++){
const num = Math.floor(Math.random()*10);
code1 += num;
}
var long = _this.GetRandomNum(107,109)+"."+code
var lati = _this.GetRandomNum(22,24)+"."+code1
// gmList.push({
// lnglat:[long,lati],
// name:"gx"+i,
// id:i
// })
let arr = new AMap.Marker({
map: _this.map,
icon: 'http://dmzhlc.czyapi.com/img/icon_dw.png',
position: new AMap.LngLat(long, lati)
})
arr.setLabel({
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>野生动物</div>", //设置文本标注内容
direction: 'center' //设置文本标注方位
});
_this.dwMarker.push(arr)
}
} else {
_this.dwMarker.forEach(e => {
e.setMap(null);
})
_this.dwMarker = []
}
} else if (val == 6) {
if (_status) {
for(var i = 0 ; i<20 ; i++){
var code = ""
var code1=""
for(var j = 1;j <= 6;j++){
const num = Math.floor(Math.random()*10);
code += num;
}
for(var x = 1;x <= 6;x++){
const num = Math.floor(Math.random()*10);
code1 += num;
}
var long = _this.GetRandomNum(107,109)+"."+code
var lati = _this.GetRandomNum(22,24)+"."+code1
// gmList.push({
// lnglat:[long,lati],
// name:"gx"+i,
// id:i
// })
let arr = new AMap.Marker({
map: _this.map,
icon: 'http://dmzhlc.czyapi.com/img/icon_wrj.png',
position: new AMap.LngLat(long, lati)
})
arr.setLabel({
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>无人机</div>", //设置文本标注内容
direction: 'center' //设置文本标注方位
});
_this.wrjMarker.push(arr)
}
} else {
_this.wrjMarker.forEach(e => {
e.setMap(null);
})
_this.wrjMarker = []
}
} else if (val == 7) {
if (_status) {
for(var i = 0 ; i<20 ; i++){
var code = ""
var code1=""
for(var j = 1;j <= 6;j++){
const num = Math.floor(Math.random()*10);
code += num;
}
for(var x = 1;x <= 6;x++){
const num = Math.floor(Math.random()*10);
code1 += num;
}
var long = _this.GetRandomNum(107,109)+"."+code
var lati = _this.GetRandomNum(22,24)+"."+code1
// gmList.push({
// lnglat:[long,lati],
// name:"gx"+i,
// id:i
// })
let arr = new AMap.Marker({
map: _this.map,
icon: 'http://dmzhlc.czyapi.com/img/icon_fh.png',
position: new AMap.LngLat(long, lati)
})
arr.setLabel({
offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
content: "<div class='info'>防火分布</div>", //设置文本标注内容
direction: 'center' //设置文本标注方位
});
_this.fhMarker.push(arr)
}
} else {
_this.fhMarker.forEach(e => {
e.setMap(null);
})
_this.fhMarker = []
}
}
})
});
},
}
}中间代码挺杂的，时间不够了，服务器也停了，地图上所用到的图标都没了，所以换个图标应该差不多了还有几个中间所用到的方法也贴出来。
GetRandomNum(Min,Max){
//生成随机数
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
},
layerLists() {
if (this.isLayer) {
this.isLayer = false
} else {
this.isLayer = true
}
},
handlePolygon(result) {
let bounds = result.districtList[0].boundaries;
var outer = [new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true)
];
var pathArray = [outer];
pathArray.push.apply(pathArray, bounds);
var polygon = new AMap.Polygon({
pathL: pathArray,
//线条颜色，使用16进制颜色代码赋值。默认值为#006600
strokeColor: '#fff',
strokeWeight: 4,
//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
strokeOpacity: 0.5,
//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
fillColor: '#051417',
//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
fillOpacity: .8,
//轮廓线样式，实线:solid，虚线:dashed
strokeStyle: 'solid',
/*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
ie9+浏览器有效 取值：
实线：[0,0,0]
虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
线和10个像素的空白 （如此反复）组成的虚线*/
strokeDasharray: [10, 2, 10]
});
polygon.setPath(pathArray);
this.map.add(polygon);
if (bounds) {
this.map.setMapStyle('amap://styles/light');
}
}然后在mounted里面执行initmap就行了。
mounted() {
let _this = this;
_this.initMap();
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
