Vue は Gaode マップを使用しています. インターネット上には多くのサンプルがあります. 公式のサンプルを選択しましょう. とても良いです.
Vue で JSAPI を使用する
公式のサンプルをダウンロードして、そこに各種 API を追加して、
各種 API の追加方法をテストできます. .then((AMap) に追加する必要があります. 最初に外層に入れただけです. 間違っています.
対応するコードを貼り付けます
<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>
公式サンプルを使用する場合、マーカーのラベルスタイルを設定するなど、組み込みのスタイルを設定すると無効になります. 組み込みのスタイルは amap-marker-label ですが、設定が無効です. 理由は次のとおりです.公式のサンプルでは、<style scoped>このスタイルを現在のページに制限するscoped が追加されています。コンパイル時に、スコープ ページ スタイルは一意の識別子 (属性) を自動的に生成するため、文字列の形式で追加されたタグは個別のタグのみになり、これらの識別子がないと css 設定が無効になります。
解決策
1. index.html にスタイルを直接追加する
index.html 内のラベルはグローバル ラベルになり、ここに追加すると直接有効になります。
2. スタイルが scoped を使用せず、
scoped を追加しない場合、コンパイル時に一意の識別子はありません. これらの CSS もグローバルに有効ですが、グローバル タグには、同じ名前の 2 つのページなど、いくつかのリスクがあります.