1.在开发平台申请你的key地址
2.如果是vue.config.js的项目就在public/index.html 里面的body里面引入cdn
如果是vite.config.ts/js的项目就在项目的最外层的index.html里面引入cdn
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key,在高德控制台可以看到"></script>
3.
方法一:在vue.config.js里面配置cdn
module.exports = {
configureWebpack: {
externals: {
AMap: 'AMap'
}
}
}
方法二:如果是vite.config.js 里面,需要安装插件
npm i -D vite-plugin-resolve-externals
import resolveExternalsPlugin from 'vite-plugin-resolve-externals'
export default defineConfig({
plugins: [
resolveExternalsPlugin({
Amap: Amp
})
]
})
方法三:如果你想直接使用也可以
直接打印window,先看看window对象有没有挂载AMap,如果有,直接调用
console.log(window)
const AMap = window.AMap
console.log(AMap)
4.重新运行项目
5.在需要的vue文件中调用高德地图
import AMap from 'AMap'
import { onMounted, reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
});
//高德地图引入
const gaode = () =>{
// 创建地图实例
let map = new AMap.Map("map", {
center: [114.298572, 30.584355],
zoom: 11.2,
// showLabel: false, //不显示地图文字标记
});
map.setCity("武汉市"); //初始化显示的区域
var styleName = "amap://styles/" + "blue";//底部颜色
map.setMapStyle(styleName);//极夜蓝
new AMap.Marker({
map: state.mapObj,
position: new AMap.LngLat("226", "335"), //此处根据页面数据可以直接传入经纬度进行描点
});
}
onMounted(() => {
gaode()
});
return {
...toRefs(state),
};
},
};