第一步：找到项目里的index.html引入
<script type="text/javascript" src="/maps?v=1.4.15&key=你申请的高德key">
同样的文件里面添加下面的css,去掉高德水印
<style type="text/css">
.amap-logo {
display: none;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0;
}
</style>
第二步：main.js
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '高德key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
v: '1.4.4'
});
第三步：在要使用的页面
<div class="map" id="map-location" ref="basicMapbox"></div>
<script>
var map, marker;
export default {
data() {
return {
arriveCoor: ['经度', '纬度'], //坐标点
arrive: "", //位置信息
mapData: [],
},
},
created() {
var that = this;
that.getmap();
that.getshop();
},
mounted() {
this.mapDraw(this.arriveCoor);
this.mapCoor(this.arriveCoor);
},
methods: {
mapDraw(arriveCoor) {
map = new AMap.Map('map-location', { //map-location是嵌地图div的id
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 16, //初始化地图层级
center: arriveCoor, //初始化地图中心点
});
this.addMarker(arriveCoor); // 定位点
},
// 实例化点标记
addMarker(arriveCoor) {
var _this = this;
marker = new AMap.Marker({
icon: new AMap.Icon({
image: "../../../static/images/locationpng.png",
size: new AMap.Size(64, 64), //图标大小
imageSize: new AMap.Size(32, 32)
}),
position: arriveCoor,
offset: new AMap.Pixel(-13, -30),
draggable: true, // 设置是否可以拖拽
cursor: 'move',
raiseOnDrag: true // 设置拖拽效果
})
marker.setMap(map);
},
mapCoor(lnglatXY) {
var _this = this;
AMap.service('AMap.Geocoder', function() { //回调函数
var geocoder = new AMap.Geocoder({});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//获得了有效的地址信息:
_this.arrive = result.regeocode.formattedAddress;
} else {
_this.arrive = "暂无位置";
}
});
})
},
},
}
</script>
