在vue中使用高德地图开发,以及AMap的引入?

百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ?

1.首先在
externals: {
"BMap": "BMap",
'AMap': 'AMap'
},

  1. 其次新建一个AMap.js 引入
    export default function MapLoader () { // <-- 原作者这里使用的是module.exports
    return new Promise((resolve, reject) => {
    if (window.AMap) {
    resolve(window.AMap)
    } else {
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.async = true
    script.src = 'http://webapi.amap.com/maps?v=1.4.14&callback=initAMap&key='
    script.onerror = reject
    document.head.appendChild(script)
    }
    window.initAMap = () => {
    resolve(window.AMap)
    }
    })
    }

3.在单文件内引入AMap.js
import MapLoader from '@/assets/js/AMap.js'
export default {
name: 'test',
data () {
return {
map: null
}
},
mounted () {
let that = this
MapLoader().then(AMap => {
console.log('地图加载成功')
var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();
that.map = new AMap.Map('container', {
center: [117.000923, 36.675807],
zoom: 11,
layers:[
satellite,
roadNet
]
})
}, e => {
console.log('地图加载失败' ,e)
})
}
}

css 注意给地图定个高度容器

最后说个题外话: 高德地图功能比较强大,比如两点连线问题,直接就可以在官方找到实例,百度上没找到,也可能文档不够详细吧。
高德地图卫星图层有个单词AMap写错了,这个跟大家纠正一下。
1329237-20190415095845001-1039170969.png

转载于:https://www.cnblogs.com/panax/p/10708984.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值