显示已经存在的坐标
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
position: [lon,lat], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title:address,
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
点击地图任意位置出现标记位
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 18
})
//为地图注册click事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {
var lng=e.lnglat.getLng(); //经度
var lat=e.lnglat.getLat(); //维度
//点标记
if(!marker){
marker = new AMap.Marker({
zIndex: 30,
});
map.add(marker);
}
marker.setPosition(new AMap.LngLat(lng,lat));
map.setFitView(marker);
_that.setState({
lng:lng,
lat:lat
},()=>{
if(!circle){
circle = new AMap.Circle({
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 20,
});
map.add(circle);
}
circle.setCenter(new AMap.LngLat(lng,lat))
map.setFitView([ circle ])
console.log(_that.state.lng,_that.state.lat)
})
})
地图显示历史轨迹
var map = new AMap.Map("container", {
center: [stories.trackList?stories.trackList[0].lon:116.397428, stories.trackList?stories.trackList[0].lat:39.90923],
zoom: 14
});
stories.trackList = stories.trackList===null ? [] : stories.trackList;
const lineArr = [];
stories.trackList.map((item,index)=>{
const arrItem = [item["lon"],item["lat"]];
lineArr.push(arrItem);
})
var polyline = new AMap.Polyline({
path: lineArr,
showDir:true,
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,
})
polyline.setMap(map)
// 缩放地图到合适的视野级别
map.setFitView([ polyline ])
