主要用到 mouseover 和 mouseout 方法
<div id="GDMap" style="height: calc(100vh - 200px)"></div>
showMap() {
loadMap(this.key, this.plugins, this.v)
.then((AMap) => {
this.GDMap = new AMap.Map("GDMap", {
zoom: 11,
resizeEnable: true,
keyboardEnable: false,
// this.showPoligin(AMap)
this.GDMap.on("complete", () => {
this.showMarker()
// this.GDMap.add(circle)
.catch((err) => {
console.log(err);
console.log("地图加载失败!");
},
showMarker(){
let mapData = this.mapData
for(let i=0;i<mapData.length;i++){
let marker = new AMap.Marker({
position:mapData[i].position,
map:this.GDMap,
marker.on("mouseover",()=>{
marker.setLabel({
direction:'top',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: `<div class='info' onclick="showInfo('${mapData[i].id}')">${mapData[i].label}</div>`, //设置文本标注内容
marker.on("mouseout",()=>{
marker.setLabel(null);
},
<script>
import loadMap from "@/assets/js/loadMap.js";
function showInfo(id){
console.log(id)
window.showInfo = showInfo
export default {
data() {
return {
mapData:[
{id:"a001",position:[119.972379,31.831254],label:"标记点1"},
{id:"a002",position:[119.969289,31.818419],label:"标记点2"},
{id:"a003",position:[119.955213,31.820315],label:"标记点3"},
{id:"a004",position:[119.961393,31.809375],label:"标记点4"}
radio:"常州",
key: "3862bb74758c8d185100ed5df030949d",
plugins: [
"AMap.ToolBar",
"AMap.Autocomplete",
"AMap.PlaceSearch",
"AMap.OverView",
"AMap.MouseTool",
"AMap.PolyEditor",
"AMap.RectangleEditor",
"AMap.DistrictLayer",
"AMap.CustomLayer",
"AMap.DistrictSearch",
v: "1.4.5",
GDMap: null,
},