第一步：引入和配置
通过在index.html 里面
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
key的获取参考官网 lbs.amap.com/api/javascr… 如果你需要引入高德自己的ui组件 你需要在上面的js下面引入
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
第二步：更改你的webpack配置
你如果是用vue-cli3搭建的项目 那么你在你的vue.config.js里面加上
configureWebpack: config => {
config.externals = {
'AMap': 'AMap',
'AMapUI': 'AMapUI',
}
配置 你在你的webpackjs文件 找到module.exports 加入下面的代码
externals: {
'AMap': 'AMap',
},
上面代码的意思是 externals 是webpack的属性 作用是来告诉webpack 在打包运行的时候，不会把下面的对象打包bundle文件下面，同时在运行的时候，而是通过外部是找这些拓展（如果是开发环境不用node_modules下面找包，生产环境不从bunble下面找），可以看出这也是我们去后期优化bunble文件过大的方向点 具体详细的介绍可以看webpack的官网https://webpack.docschina.org/configuration/externals/
AMap是高德js暴露出来的js对象
AMapUI是高德ui组件的js对象
第三步：引入高德对象
如果你是 vue+js 的写法 就是按照
import AMap from 'AMap'
import AMapUI from 'AMapUI'
这样来引入 如果你是vue+ts的写法 按照上面的方法引入 会报错 会提示你上述模块找不到 这个时候 换一种写法
declare let AMap: any
declare let AMapUI: any
ts使用declare let声明变量
到此高德地图的引入已经完成了
高德地图的api
创建一个地图实例
new AMap.Map('modelMap', {
resizeEnable: true,
lang: 'zh_cn',
mapStyle: 'amap://styles/5e584ac8f07795205224de2bfb350723',
features: ['road', 'point']
})
modelMap：一个dom元素的id
resizeEnable //是否监控地图容器尺寸变化
center:地图实例的中心点
zoom:地图的缩放比例 如果没有效果 检测一下你的center设置
mapStyle:自定义图层的样式
features：设置地图上显示的元素种类 支持'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物）
在地图中我们可能需要在地图上绘制一些点 高德api给我们提供俩种方式添加标记，但是创建标记的方式只有一种
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [116.406315,39.908775],
offset: new AMap.Pixel(-13, -30)
});
positon:标记的经纬度 offfset的偏移量 icon 是标记的样式 icon可以换成content（自定义内容标记）如果没有此属性 使用默认标记点 分为俩种情况 1.当你需要一个个的添加 可以使用
marker.setMap(map);
marker是你创建的标记实例 map是创建的地图实例
2.当你需要同时添加多个标记点
markerList = workCars.map(
(item: any) =>
new AMap.Marker({
content:
"<div class='marker-img'><img width='20px' src='' /></div>", // 自定义点标记覆盖物内容
position: item.location, // 基点位置
offset: new AMap.Pixel(-10, -24)
})
)
map.add(markerList)
把需要同时添加的标记点放在markerList这个数组里面 使用地图实例的add方法，去添加这些标记点 当同时需要清除这些点的时候
map.remove(markerList)
是用这个方法的时候 markerList必须和add方法添加的时候是一样的，否则无法清除标记。
当使用标记点的时候 报了下面的错误Invalid Object: Pixel(NaN, NaN),请检查是否你的position的经纬度数据是否正确的
3.插件的使用 例如当我们需要去试一下一个地图搜索功能组件的时候 我们可以去利用POI搜索插件来实现这个功能
具体代码如下
AMap.service(['AMap.PlaceSearch'], function() {
// 构造地点查询类
var placeSearch = new AMap.PlaceSearch({
pageSize: 6, // 单页显示结果条数
pageIndex: 1, // 页码
map: self.map, // 展现结果的地图实例
panel: 'panel', // 结果列表将在此容器中进行展示。
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
renderStyle: 'default'
})
// 关键字查询
placeSearch.search(self.mapData.keyWord, function(
status: string,
result: any
) {
console.log(status, result)
if (status === 'complete') {
if (result.poiList.pois.length === 0) {
(self.$refs.panel as HTMLElement).innerHTML = ''
self.$message('请输入更加详细的地址')
return
}
console.log(self.map.event)
AMap.event.addListener(placeSearch, 'listElementClick', function(
e: any
) {
console.log(e)
self.mapData.lng = e.data.location.lng
self.mapData.lat = e.data.location.lat
self.mapData.data = e.data
self.circle = undefined
})
} else {
self.$message({
message: '搜索失败，请重试',
type: 'error'
})
return false
}
})
})
通过回调函数 创建了一个placeSearch实例，实例的具体参数，方法可以查看https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch
如果你希望隐藏高德地图的logo 可以加入下面的css
.amap-logo{
display: none !important;
}
.amap-copyright{
opacity:0;
}
因为高德地图的api很多也很碎，看过一遍就忘了，所以做个总结，希望对你有一点帮助
