使用
如果你已经尝试了
添加标记
1、marker.setMap(map);
2、marker.add([marker]);
删除标记：
1.marker.setMap(null);
2 map.remove([marker1,marker2]);（前提是map用add添加的标记）
还是无效 那么你可以试试这个终极擦除痕迹的方法
map.clearMap();
作者：UoUo
链接：juejin.cn/post/697767…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
一、使用步骤
1、index.html，body中引入全局api
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'你的秘钥',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
使用模板，可以独立封装为一个组件使用 Amap/index.vue
<template>
<div>
<!-- 高德地图 -->
<div id="container"></div>
<div id="details" style="background-color: rgba(240, 248, 255, 0.539);padding: 10px;">
<div>
<div style="text-align:lef;">
<span>经纬度：{{ this.lnglat }}</span><br />
<span>地址：{{ this.address }}</span><br />
<span>最近的路口：{{ this.nearestJunction }}</span><br />
<span>最近的路：{{ this.nearestRoad }}</span><br />
<span>最近的POI：{{ this.nearestPOI }}</span><br />
</div>
</div>
</div>
<!-- 搜索 -->
<div id="search">
<el-input v-model="searchValue" placeholder="请输入要搜索的位置" style="width: 300px" />
<el-button type="primary" @click="seachAddress">搜索</el-button>
<br />
<el-input v-model="sonDistance" placeholder="请输入搜索半径（单位米）" style="width: 300px" />
<!-- <button style="margin-left:5px;" type="primary" @click="reporAddress">上报位置</button> -->
</div>
</div>
</template>
<script>
export default {
name:'gdmap',
data() {
return {
searchValue:'',
gdmap: null,
/* 当前位置 */
thisPosition: {
location: '',
lng: '',
lat: ''
},
/* 选取的位置 */
chosePosition: {
location: '',
lng: '',
lat: ''
},
/* 范围圆的数据 */
myCircle: {},
/* 签到圆对象 */
circle: {},
/* 编辑器对象 */
circleEditor: null,
/* 拖拽对象 */
positionPickerObj: {},
//经纬度
lnglat:'',
//地址
address:'',
//最近的路口
nearestJunction:'',
//最近的路
nearestRoad:'',
//最近的POI
nearestPOI:'',
/* 当前城市编码 */
citycode: '020',
//标记
marker:[],
}
},
created() {
},
mounted() {
//地图初始化
this.gdmap = new AMap.Map('container', {
resizeEnable: true,//是否监控地图容器尺寸变化
zoom: 15,//地图显示的缩放级别
zooms: [3, 18],//地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；
viewMode: '2D',//默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果
})
//加载工具条
this.addTool();
//获取当前位置
this.thisLocation();
},
methods:{
//工具条
addTool () {
AMap.plugin(['AMap.ToolBar'], () => {
let toolbar = new AMap.ToolBar()
this.gdmap.addControl(toolbar)
})
},
//定位
thisLocation () {
this.gdmap.plugin('AMap.Geolocation', () => {
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 100, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset:new AMap.Pixel(10,20),
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
this.gdmap.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', (data) => {
console.log(data);
//当前城市编码
this.citycode = data.addressComponent.cityCode;
//经纬度
this.thisPosition = data.position;
//地址
this.formattedAddress=data.formattedAddress;
this.chosePosition = this.thisPosition;
/* 画圆 */
this.cancelLocation()
this.addCircle()
/* 拖拽选址 */
this.positionPicker();
})
AMap.event.addListener(geolocation, 'error', function (data) {
alert('定位失败');
})
})
},
/* 拖拽选址 */
positionPicker () {
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
this.positionPickerObj = new PositionPicker({
mode: 'dragMarker', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
map: this.gdmap // 依赖地图对象
})
this.positionPickerObj.on('success', (positionResult) => {
console.log(positionResult,"positionResult");
this.chosePosition = positionResult.position;
//经纬度
console.log("经纬度:"+positionResult.position);
this.lnglat=positionResult.position;
//地址
console.log("地址:"+positionResult.address);
this.address=positionResult.address;
//最近的路口
console.log("最近的路口:"+positionResult.nearestJunction);
this.nearestJunction=positionResult.nearestJunction;
//最近的路
console.log("最近的路:"+positionResult.nearestRoad);
this.nearestRoad=positionResult.nearestRoad;
//最近的POI
console.log("最近的POI:"+positionResult.nearestPOI);
this.nearestPOI=positionResult.nearestPOI;
/* 画圆 */
this.cancelLocation();
this.addCircle();
})
this.positionPickerObj.start([this.chosePosition.lng, this.chosePosition.lat])
})
},
/* 取消圆 */
cancelLocation() {
this.gdmap.remove(this.circle)
if (this.circleEditor) {
this.circleEditor.close()
}
},
/* 画图 */
addCircle() {
this.myCircle = {
center: [this.chosePosition.lng, this.chosePosition.lat], // 圆心位置
radius: 50, // 半径
strokeColor: '#FFFF00', // 线颜色
strokeOpacity: 0.2, // 线透明度
strokeWeight: 1, // 线粗细度
fillColor: '#222222', // 填充颜色
fillOpacity: 0.2 // 填充透明度
}
this.circle = new AMap.Circle(this.myCircle)
this.circle.setMap(this.gdmap)
// 引入多边形编辑器插件
this.gdmap.plugin(['AMap.CircleEditor'], () => {
// 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
this.circleEditor = new AMap.CircleEditor(this.gdmap, this.circle)
// 开启编辑模式
this.circleEditor.open()
//this.myCircle.radius = this.circle.Mg.radius
this.circleEditor.on('adjust', (data) => {
this.myCircle.radius = data.radius
})
this.circleEditor.on('move', (data) => {
console.log('移动')
this.chosePosition.lng = data.lnglat.lng
this.chosePosition.lat = data.lnglat.lat
})
})
},
//搜索
seachAddress(){
if(this.searchValue!=''){
//清楚地图上的覆盖物
this.gdmap.clearMap();
console.log("搜索");
this.gdmap.plugin('AMap.PlaceSearch', () => {
let placeSearch = new AMap.PlaceSearch({
// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
city: '0797',
map: this.gdmap
});
let that=this;
placeSearch.search(this.searchValue, function (status, result) {
// 查询成功时，result即对应匹配的POI信息
console.log(result)
var pois = result.poiList.pois;
for(var i = 0; i < pois.length; i++){
var poi = pois[i];
var marker = [];
marker[i] = new AMap.Marker({
position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: poi.name
});
// 将创建的点标记添加到已有的地图实例：
that.gdmap.add(marker[i]);
}
that.gdmap.setFitView();
AMap.event.addListener(placeSearch,'markerClick',function(data){
console.log(data);
let result=data;
//经纬度
let lng=result.event.lnglat.lng;
let lat=result.event.lnglat.lat;
that.lnglat=lng+","+lat;
//地址
that.address=result.data.address;
//最近路口
that.nearestJunction='';
//最近的路
that.nearestRoad='';
//最近的POI
that.nearestPOI='';
})
});
})
}
},
//位置上报
reporAddress(){
},
}
}
</script>
<style>
#container {
width:100%;
height: 600px;
}
#search{
z-index:999;
position:absolute;
left:100px;
top:30px;
opacity:0.8;
}
#details{
z-index:999;
position:absolute;
right:0px;
top:0px;
opacity:0.8;
}
</style>
效果图：
自用模板（本人自己改过的，不适合别人,仅作为自己记录用）
<amap :carList="carList" :distance="position.distance"
@changeCenter="changeCenter" @changeDistance="changeDistance"></amap>
<template>
<div>
<!-- 高德地图 -->
<div id="container"></div>
<div id="details" style="background-color: rgba(240, 248, 255, 0.539);padding: 10px;">
<div>
<div style="text-align:lef;">
<span>经纬度：{{ this.lnglat }}</span><br />
<span>地址：{{ this.address }}</span><br />
<span>最近的路口：{{ this.nearestJunction }}</span><br />
<span>最近的路：{{ this.nearestRoad }}</span><br />
<span>最近的POI：{{ this.nearestPOI }}</span><br />
</div>
</div>
</div>
<!-- 搜索 -->
<div id="search">
<el-input v-model="searchValue" placeholder="请输入要搜索的位置" style="width: 300px" />
<el-button type="primary" @click="seachAddress">搜索</el-button>
<br />
<el-input v-model="sonDistance" placeholder="请输入搜索半径（单位米）" style="width: 300px" />
<el-button type="success" @click="seachAddress">搜索</el-button>
<!-- <button style="margin-left:5px;" type="primary" @click="reporAddress">上报位置</button> -->
</div>
</div>
</template>
<script>
export default {
name: 'gdmap',
data() {
return {
sonDistance:1000,
searchValue: '',
gdmap: null,
/* 当前位置 */
thisPosition: {
location: '',
lng: '',
lat: ''
},
/* 选取的位置 */
chosePosition: {
location: '',
lng: '',
lat: ''
},
/* 范围圆的数据 */
myCircle: {},
/* 签到圆对象 */
circle: {},
/* 编辑器对象 */
circleEditor: null,
/* 拖拽对象 */
positionPickerObj: {},
//经纬度
lnglat: '',
//地址
address: '',
//最近的路口
nearestJunction: '',
//最近的路
nearestRoad: '',
//最近的POI
nearestPOI: '',
/* 当前城市编码 */
citycode: '020',
//标记
marker: [],
}
},
props: {
mapData: Object,
carList: {
type: Array,
require:false
},
distance: {
type: Number,
default: 1000
}
},
watch: {
sonDistance() {
/* 画圆 */
this.cancelLocation()
this.addCircle()
this.$emit('changeDistance',this.sonDistance)
}
},
created() {
},
mounted() {
console.log("carList",this.carList)
if (this.mapData != null) {
this.thisPosition.lng = this.mapData.position.split(",")[0]
this.thisPosition.lat = this.mapData.position.split(",")[1]
}
//地图初始化
this.gdmap = new AMap.Map('container', {
resizeEnable: true,//是否监控地图容器尺寸变化
zoom: 15,//地图显示的缩放级别
zooms: [3, 18],//地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；
viewMode: '2D',//默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果
})
//加载工具条
this.addTool();
//获取当前位置
this.thisLocation();
console.log("this.carList ",this.carList )
if (this.carList != null) {
this.carList.map((item) => {
this.gdmap.add(new AMap.Marker({
position: new AMap.LngLat(item.position.split(",")[0], item.position.split(",")[1]),
offset: new AMap.Pixel(-10, -10),
icon: new AMap.Icon({
image: require('@/assets/car.png'),
size: new AMap.Size(50, 50), //图标大小
imageSize: new AMap.Size(50, 50)
}),
title: '停车点'
}))
})
} else {
this.gdmap.on('click', this.showInfoClick);
}
},
methods: {
showInfoClick(e) {
var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！'
console.log(text)
this.gdmap.remove(this.marker);
this.marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
offset: new AMap.Pixel(-10, -10),
icon: new AMap.Icon({
image: require('@/assets/car.png'),
size: new AMap.Size(25, 25), //图标大小
imageSize: new AMap.Size(25, 25)
}),
title: '停车点'
});
this.gdmap.add(this.marker);
if (this.mapData != null) {
this.$emit('selectPosition', this.mapData.position)
}
},
//工具条
addTool() {
AMap.plugin(['AMap.ToolBar'], () => {
let toolbar = new AMap.ToolBar()
this.gdmap.addControl(toolbar)
})
},
//定位
thisLocation() {
this.gdmap.plugin('AMap.Geolocation', () => {
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 1000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
this.gdmap.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', (data) => {
console.log(data);
//当前城市编码
this.citycode = data.addressComponent.cityCode;
//经纬度
if (this.thisPosition.lng == '') {
this.thisPosition = data.position;
}
//地址
this.formattedAddress = data.formattedAddress;
this.chosePosition = this.thisPosition;
/* 画圆 */
this.cancelLocation()
this.addCircle()
/* 拖拽选址 */
this.positionPicker();
})
AMap.event.addListener(geolocation, 'error', function (data) {
alert('定位失败');
})
})
},
/* 拖拽选址 */
positionPicker() {
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
this.positionPickerObj = new PositionPicker({
mode: 'dragMarker', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
map: this.gdmap // 依赖地图对象
})
this.positionPickerObj.on('success', (positionResult) => {
console.log(positionResult, "positionResult");
this.chosePosition = positionResult.position;
//经纬度
console.log("经纬度:" + positionResult.position);
this.$emit('selectPosition', positionResult.position.lng + "," + positionResult.position.lat)
this.lnglat = positionResult.position;
//地址
console.log("地址:" + positionResult.address);
this.address = positionResult.address;
//最近的路口
console.log("最近的路口:" + positionResult.nearestJunction);
this.nearestJunction = positionResult.nearestJunction;
//最近的路
console.log("最近的路:" + positionResult.nearestRoad);
this.nearestRoad = positionResult.nearestRoad;
//最近的POI
console.log("最近的POI:" + positionResult.nearestPOI);
this.nearestPOI = positionResult.nearestPOI;
/* 画圆 */
this.cancelLocation();
this.addCircle();
})
this.positionPickerObj.start([this.chosePosition.lng, this.chosePosition.lat])
})
},
/* 取消圆 */
cancelLocation() {
this.gdmap.remove(this.circle)
if (this.circleEditor) {
this.circleEditor.close()
}
},
/* 画图 */
addCircle() {
this.myCircle = {
center: [this.chosePosition.lng, this.chosePosition.lat], // 圆心位置
radius: this.distance , // 半径
strokeColor: '#FFFF00', // 线颜色
strokeOpacity: 0.2, // 线透明度
strokeWeight: 1, // 线粗细度
fillColor: '#222222', // 填充颜色
fillOpacity: 0.2 // 填充透明度
}
this.circle = new AMap.Circle(this.myCircle)
this.circle.setMap(this.gdmap)
// 引入多边形编辑器插件
this.gdmap.plugin(['AMap.CircleEditor'], () => {
// 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
this.circleEditor = new AMap.CircleEditor(this.gdmap, this.circle)
// 开启编辑模式
this.circleEditor.open()
//this.myCircle.radius = this.circle.Mg.radius
this.circleEditor.on('adjust', (data) => {
this.myCircle.radius = data.radius
})
this.circleEditor.on('move', (data) => {
console.log('移动')
this.chosePosition.lng = data.lnglat.lng
this.chosePosition.lat = data.lnglat.lat
})
})
},
//搜索
seachAddress() {
console.log("搜索", this.searchValue);
if (this.searchValue != '') {
//清楚地图上的覆盖物
this.gdmap.clearMap();
this.gdmap.plugin('AMap.PlaceSearch', () => {
let placeSearch = new AMap.PlaceSearch({
// city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
city: '0797',
map: this.gdmap
});
let that = this;
placeSearch.search(this.searchValue, (status, result) => {
// 查询成功时，result即对应匹配的POI信息
console.log(result)
var pois = result.poiList.pois;
for (var i = 0; i < pois.length; i++) {
var poi = pois[i];
var marker = [];
marker[i] = new AMap.Marker({
position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: poi.name
});
// 将创建的点标记添加到已有的地图实例：
that.gdmap.add(marker[i]);
}
that.gdmap.setFitView();
AMap.event.addListener(placeSearch, 'markerClick', (data) => {
console.log(data);
let result = data;
//经纬度
let lng = result.event.lnglat.lng;
let lat = result.event.lnglat.lat;
this.chosePosition.lng = lng
this.chosePosition.lat = lat
this.$emit('changeCenter', this.chosePosition)
this.cancelLocation();
this.addCircle();
that.lnglat = lng + "," + lat;
//地址
that.address = result.data.address;
//最近路口
that.nearestJunction = '';
//最近的路
that.nearestRoad = '';
//最近的POI
that.nearestPOI = '';
})
});
})
}
},
//位置上报
reporAddress() {
},
}
}
</script>
<style>
#container {
width: 100%;
height: 600px;
}
#search {
z-index: 999;
position: absolute;
left: 20px;
top: 22px;
opacity: 0.8;
}
#details {
z-index: 999;
position: absolute;
right: 0px;
top: 0px;
opacity: 0.8;
}
</style>
