由于使用vue-amap插件有点问题,所以使用了原生高德地图api。
集成:
- public/index.html 添加
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=6edcabf26de83ce1024f843dcb8d3617"></script>
- vue.config.js 添加高德地图配置
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
},
- vue 代码(初步实现添加marker及点击弹出详情示例)
<template>
<div style="height:500px;width:500px">
<div style="height:100%;width:100%" id="container" width tabindex="0"></div>
</div>
</template>
<script>
import AMap from 'AMap'
export default {
name: 'mapDetail',
data</