1、安装
npm i vue-amap --save
2、引用
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
key: '申请的key',
// 使用插件
plugin: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geocoder', 'AMap.Autocomplete'],
// 默认高德SDK版本为:1.4.15
v: '2.0',
uiVersion: '1.0.11'
});
index.html 引入
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '申请key对应的密钥'
}
</script>
3、初始化地图、逆向编码、添加标记、提示框及批量标记
this.map = new AMap.Map("mytest1Map",
{resizeEnable: true,// 是否控制地图尺寸大小
viewMode:"3D",// 使用3D视图
zoomEnable:true,//地图是否可缩放,默认值为true
zoom: 10,// 缩放比例
dragEnable: true,// 禁上拖动
cursor:"hand",//鼠标在地图上展示手型
center: [116.397428, 39.90923], // 设置中心坐标
});
// 创建地理编码[逆向地理编码:坐标>地址 正向地理编码:地址->坐标]
this.geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
city: '全国'
radius: 1000
})//范围,默认: 500
//地图双击事件
this.map.on("dblclick", (res) => {
let p = []
p.push(res.lnglat.lng)
p.push(res.lnglat.lat)
// 逆向编码
this.geocoder.getAddress(p, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result.regeocode) {
Let address = result.regeocode.formattedAddress
let keyid = result.regeocode.addressComponent.towncode
let pItem = (name:address, lnglat:p, id:keyid}
that.markersData.push(pItem)
that.addMarker(pItem) // 添加标记
}
} else {
console.error('根据经纬度查询地址失败')
}
});
// 添加标记
addMarker(pItem) {
let marker = new AMap .Marker({
//经度- Longitude 维Latitude
position: pItem.lnglat, //要展示marker的经度、结度。数据格式就是数组里放入经结度数据
//icon: require("../../../assets/imgs/site-16-32.png"), //显示的图标
icon: this.icon,
offset: new AMap.Pixe1(-16,-32),//图标偏移量,展示时会默认以图标的左上角为原点,不没置偏移量会导致地图放大缩小时造成图标偏移的情况,偏移量设置为:图片宽度的一半,负整个高度
marker.setLabel({
direction: "center", // 设置文本居中
// offset: new AMap.PixeL(0,30),//没置文本标注偏移量 写法2: offset: {x: 0, y: 30}
// offset: new AMap.Pixel(0,32),//设置文本标注偏移量 写法2: offset: {x: 0, y: 32}
// content: "div style='background: #12469C; color: white;'>"+pItem.name+"</div>",//设置文本标注内容
content:"<div class='notInfo'>"+pItem,name+"</div>",//设置文本标注内容
});
this .map.add(marker)
}
// 创建图标
this.icon = new AMap.Icon({ // 创建 AMap.Icon 实例
size: new AMap.Size(32,32), //图标尺寸
image: require("../../../assets/imgs/site-16-32.png"), // Icon的图像
imageOffset: new AMap.Pixel(0,-69),// 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.size(32,32), // 根据所设置的大小拉伸或压缩图片
})
this.icon2 = new AMap.Icon({ // 创建 AMap.Icon 实例
size: new AMap.size(32, 42), //图标尺寸
image: require("../../../assets/imgs/poi-marker-default.png"), // Icon的图像
imageOffset: new AMap.Pixel(0,-60), // 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.size(32,42), // 根据所设置的大小拉伸或压缩图片
})
// 批量添加标记
addMassMarkers() {
// 信息提示框
this.infowindow = new AMap.InfoWindow({
autoMove: true,
//anchor: "top-Left",
offset: {x:6, y:-32},
})
this.markersData.forEach((item, i) => {
let marker = new AMap .Marker({map: this.map,
position: item.lnglat,
icon: this.icon,
//offset: new AMap.Pixel(0,0),
})
// 提示信意
let s = []
s.push("<b>名称:" + item.name+"</b>")
s.push("<hr>")
s.push("地址: " + item.name)
this.infowindow.setContent(s.join("<br>"))
marker.content = {infowin: this.infowindow, title: item.name}
marker.on('click', this.markerClick)
this.markers.push(marker)
})
this .map.add(this.markers )
// this.map.setFitView(); // 自动适应显示想显示的范围区域
}
4、显示定点标记、点击标记事件
// 定位标记
setLocation(poi, index) {
this.currMarker = index
for (let i = ; i < this.markers.length; i++) {
this.markers[il.setIcon(this.icon)
}
this.markers[index].setIcon(this.icon2) // 更换图标
this.markers[index].content.infowin.open(this.map, poi.lnglat)
this.map.setCenter(poi.Inglat) // 设置中心坐标
}
markerClick(e) {
// 标注点击事件 显示提示信息
e.target.content.infowin.open(this.map, e.target.getPosition())
}