高德地图开放平台:
https://lbs.amap.com/api/javascript-api/guide/abc/prepare
1. 在index.html中引入高德地图,并替换key值
<script src="https://webapi.amap.com/maps?v=1.3&key= &plugin=AMap.Autocomplete">
2.在页面中直接使用
<template> <div> <p>jsmap</p> <div id="mapBox" class="ppp"></div> </div> </template> <script> export default { data() { return { mapData: { center: [104.063266, 30.578026], zoom: 12 } }; }, mounted() { this.mapInit(); }, methods: { mapInit() { let self = this; let map = new AMap.Map("mapBox", { zoom: self.mapData.zoom, resizeEnable: true, center: self.mapData.center }); let marker = new AMap.Marker({ position: self.mapData.center, map: map }); } } }; </script> <style> .ppp { width: 500px; height: 300px; margin: 0 auto; border: 1px solid deeppink; } </style>
3. 更多的功能请自行学习api
原文:https://www.cnblogs.com/qlongbg/p/13274521.html