2.在vue中的配置
'AMap' is not defined // 在vue中eslint会报错,所以需要先配置下webpack
- Vue-cli2.x项目配置
// build目录下有webpack.base.conf.js配置文件,添加下面的字段
externals: {
swiper: 'Swiper',
AMap: 'AMap', // 引入地图对象,引入后 new AMap() 才不会报错
},
- Vue-cli3.X项目配置
// 在项目根目录下创建 vue.config.js文件
module.exports = {
configureWebpack: {
externals: {
AMap: "AMap",
Loca: "Loca",
AMapUI: "AMapUI"
}
}
};
然后在文件中, import AMap from ‘AMap’ 引入使用
或者直接使用这个官方插件 vue-amap
// 实现了中心点及缩放级别设置。覆盖物的自定义图标的偏移量。
-
移动端点击闪烁的问题
// 在被点击的元素设置css:-webkit-tap-highlight-color:transparent; (去掉点击高亮) -
坐标拾取
// 第一个是腾讯的,第二个是高德的。两个地图的图标是不一样的 -
高德地图开发 – 地图JS API – 示例中心 (不懂参数的话看 参考手册)
// 看到右侧的运行,是不是感觉简单的像个一似的。(百度地图也有示例中心哦,也是在开放平台)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>地图显示</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
#container {
position: relative;
width: 1620px;
height: 780px;
}
/* 标记点 */
.icon-wrapper {
font-size: 0;
display: flex;
align-items: center;
}
.icon-wrapper img {
width: 41px;
height: 56px;
display: inline-block;
vertical-align: middle;
}
.icon-wrapper span {
vertical-align: middle;
display: inline-block;
padding: 3.5px 14px;
color: #fff;
font-size: 14px;
background-color: #d81e06;
border-radius: 26px;
}
/* 去掉高德logo */
.amap-copyright,
.amap-logo {
display: none !important;
}
</style>
</head>
<body>
<div id="container"></div>
<!-- 一:初始化地图---0图层 -->
<script src="http://webapi.amap.com/maps?v=1.4.7&key=81e620db64d30deb3028e685b91696b3"></script>
<script>
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 16 //初始化地图层级
})
// 二:使用插件(异步多个):通过AMap.plugin方法按需引入插件----3控件
// 缩放插件
AMap.plugin(['AMap.ToolBar'], function() {
var toolbar = new AMap.ToolBar({
liteStyle: true
})
map.addControl(toolbar)
})
// 三:实例化标记点
var markers = [],
marker1,
marker2,
marker3
addMarker()
function addMarker() {
var location =
'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
// 标记点一--(点覆盖物 new AMap.Marker创建)
marker1 = new AMap.Marker({
position: [108.789408, 29.523336], // 简写
offset: new AMap.Pixel(-20, -130), // 像素点
content: `
<div class="custom-content-marker" id="marker1">
<div class="icon-wrapper">
<img class="icon" src="${location}">
<span class="text">城东支行</span>
</div>
</div>`, // content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段
extData: {
id: 0
} // 利用 extData 属性给覆盖物添加 id,获取特定的覆盖物。
})
marker1.setMap(map) // 添加或删除图层setMap(null)
markers.push(marker1)
// 标记点二
marker2 = new AMap.Marker({
position: [108.77236, 29.530634],
offset: new AMap.Pixel(-20, -130),
content: `
<div class="custom-content-marker" id="marker2">
<div class="icon-wrapper">
<img class="icon" src="${location}">
<span class="text">黔江分行</span>
</div>
</div>`,
extData: {
id: 1
}
})
marker2.setMap(map)
markers.push(marker2)
// 标记点三:
marker3 = new AMap.Marker({
position: [108.787026, 29.521603],
offset: new AMap.Pixel(-20, -130),
content: `
<div class="custom-content-marker" id="marker3">
<div class="icon-wrapper">
<img class="icon" src="${location}">
<span class="text">金三角自助银行</span>
</div>
</div>`,
extData: {
id: 3
}
})
marker3.setMap(map)
markers.push(marker3)
}
// 四 : 创建并添加覆盖物群组,并将 marker 传给 OverlayGroup
var overlayGroups = new AMap.OverlayGroup(markers)
map.add(overlayGroups)
// 五:设置平移地图中心点及缩放级别(还有平移的方式)
map.setZoomAndCenter(16, [108.789408, 29.523336])
// map.setZoom(16)
// map.panTo([108.789408, 29.523336])
setTimeout(function() {
document.getElementById('marker1').onclick = function(e) {
e.stopPropagation()
console.log('点击了marker0标记点')
}
}, 1000)
</script>
</body>
</html>