高德地图在 vue 中的使用
npm install @amap/amap-jsapi-loader
import AMapLoader from "@amap/amap-jsapi-loader";
const aMap = () => {
return AMapLoader.load({
key: "使用自己的key",
version: "2.0",
plugins: [
"AMap.DistrictSearch",
"AMap.Weather",
"AMap.Geocoder",
"AMap.Marker",
],
Loca: {
version: "2.0.0",
},
});
};
export default aMap;
import aMap from "@/assets/js/amap";
async function mapInit() {
await aMap().then((AMap) => {
map = new AMap.Map("map", {
center: [121.734942, 31.086444],
zoom: 12.2,
pitch: 40,
mapStyle: "amap://styles/blue",
viewMode: "3D",
});
});
}
<div id="map"></div>
#map {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
font-size: 16px;
transform: translate3d(0, 0, 0);
}