Vue uses Gaode map. There are many samples on the Internet. Let's choose the official sample. It is very good.
Using JSAPI with Vue
You can download the official sample and add various APIs in it to test
the method of adding various APIs. You need to add it in .then((AMap). I just put it in the outer layer at the beginning. It is wrong.
Paste the corresponding code
<template>
<div class="home_div">
<div class="map_title">
<h3>JSAPI Vue2地图组件示例</h3>
</div>
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "Mapview",
data() {
return {
//map:null,
};
},
created() {
},
mounted() {
this.initAMap();
},
methods: {
initAMap() {
AMapLoader.load({
key: "设置自己的key", //设置您的key
version: "2.0",
plugins: ["AMap.ToolBar", "AMap.Driving"],
AMapUI: {
version: "1.1",
plugins: [],
},
Loca: {
version: "2.0",
},
})
.then((AMap) => {
var map = new AMap.Map("container", {
viewMode: "3D",
zoom: 5,
zooms: [2, 22],
center: [105.602725, 37.076636],
});
var marker = new AMap.Marker({
position: map.getCenter(),
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
anchor: "bottom-center",
offset: new AMap.Pixel(0, 0),
});
marker.setMap(map);
// 设置鼠标划过点标记显示的文字提示
marker.setTitle("我是marker的title");
// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
marker.setLabel({
direction: "top",
offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
});
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>
<style >
.home_div {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: relative;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: absolute;
}
.map_title {
position: absolute;
z-index: 1;
width: 100%;
height: 50px;
background-color: rgba(27, 25, 27, 0.884);
}
h3 {
position: absolute;
left: 10px;
z-index: 2;
color: white;
}
.amap-icon img {
width: 25px;
height: 34px;
}
.amap-marker-label {
border: 0;
background-color: transparent;
}
.info {
position: relative;
margin: 0;
top: 0;
right: 0;
min-width: 0;
}
</style>
If you use the official sample, it is invalid to set the built-in style, such as setting the Label style of the marker. The built-in style is amap-marker-label, but the setting is invalid. The reason is that the official sample adds scoped, which <style scoped>will Limit this style to the current page. When compiling, a scoped page style will automatically generate a unique identifier (attribute), so that the tags added in the form of strings will only be separate tags, and the lack of these identifiers will cause the css settings to be invalid.
Solution
1. The style is directly added to index.html.
The label in index.html will be a global label, and it will be directly effective when added here.
2. If the style does not use scoped and
does not add scoped, there will be no unique identifier at compile time. These css are also globally valid, but there are some risks in global tags, such as two pages with the same name.