1、在index.html这种引入高德地图
<script type="text/javascript" src="/maps?v=1.4.13&key=your key"></script>
2、在webpack.base.conf.js 代码最后面引入
externals: {'AMap': 'AMap',}
3、在vue文件中使用
<template><div id="my_container"></div></template><script>import AMap from 'AMap'export default {name: "company_manage",data () {return {ruleForm: {name: '',phone: '',addr: '',long: '',lat: '',start_work_time: '',end_work_time: '',},}},mounted:function () {this.init()},methods: {init() {var map = new AMap.Map('my_container',{resizeEnable: true,zoom: 18,})AMap.plugin('AMap.Geolocation',function(){ //异步加载插件var geolocation = new AMap.Geolocation()map.addControl(geolocation)})var geocoder,marker;function regeocoder(lnglatXY,that) { AMap.plugin('AMap.Geocoder',function(){ var geocoder = new AMap.Geocoder({radius: 1000,extensions: "all"}); geocoder.getAddress(lnglatXY, function(status, result) {if (status === 'complete' && result.info === 'OK') {var address = result.regeocode.formattedAddress;that.ruleForm.addr = address}}); if(!marker){marker = new AMap.Marker();map.add(marker);}marker.setPosition(lnglatXY);}) }var that = thismap.on('click', function(e) {var lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()];regeocoder(lnglatXY,that)that.ruleForm.long = e.lnglat.getLng()that.ruleForm.lat = e.lnglat.getLat()});},},}</script><style scoped>#my_container{margin-left: 110px;height: 300px;width: calc(100% - 110px);}</style>
