下载依赖
yarn add @amap/amap-jsapi-loader
2、初始化高德地图 设置key和秘钥
<template>
<div class="page-box">
<el-input id="mapInput" type="text" value="请输入关键字：(选定后搜索)" onfocus='this.value=""' placeholder="请输入活动地址" />
<!-- 百度地图 -->
<div id="bai-du-map">
<!-- 技术支持和联系方式 -->
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '01749f31f7a3a451c2e1xxxxxxx',
}
export default {
data() {
return {
map: null,
mouseTool: null,
overlays: [],
auto: null,
placeSearch: null,
};
},
created() {
this.initMap()
},
methods: {
initMap() {
AMapLoader.load({
"key": "3748e65db671fcc6eb43d3bbxxxx",
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": [] // 插件
}).then((AMap) => {
console.log(1)
// 初始化地图
this.map = new AMap.Map('bai-du-map', {
viewMode: "2D", // 是否为3D地图模式
zoom: 13, // 初始化地图级别
center: [113.65553, 34.748764], //中心点坐标 郑州
resizeEnable: true
});
}).catch(e => {
console.log(e);
});
},
},
};
</script>
<style scoped>
#bai-du-map {
overflow: hidden;
width: 400px;
height: 300px;
margin: 0;
font-family: "微软雅黑";
position: absolute;
right: 35%;
top: 40%;
}
</style>
<style scoped lang="less">
/* 隐藏高德logo */
.amap-logo {
display: none !important;
}
/* 隐藏高德版权 */
.amap-copyright {
display: none !important;
}
</style>
这样就能渲染出地图来了
3、使用高德地图API插件 实现搜索定位功能
<template>
<div class="page-box">
<el-input id="mapInput" type="text" value="请输入关键字：(选定后搜索)" onfocus='this.value=""' placeholder="请输入活动地址" />
<!-- 百度地图 -->
<div id="bai-du-map">
<!-- 技术支持和联系方式 -->
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
securityJsCode: '01749f31f7a3a451c2e1cxxxxxxx',
}
export default {
data() {
return {
map: null,
mouseTool: null,
overlays: [],
auto: null,
placeSearch: null,
};
},
created() {
this.initMap()
},
methods: {
initMap() {
AMapLoader.load({
"key": "3748e65db671fcc6eb43d3bbxxxxxxx",
"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
"plugins": ['AMap.AutoComplete', 'AMap.PlaceSearch'],//这里一定要注意 驼峰式 我没注意这块 找问题浪费了很多时间
}).then((AMap) => {
// 初始化地图
this.map = new AMap.Map('bai-du-map', {
viewMode: "2D", // 是否为3D地图模式
zoom: 13, // 初始化地图级别
center: [113.65553, 34.748764], //中心点坐标 郑州
resizeEnable: true
});
var autoOptions = {
// 城市，默认全国
// city: "北京",
// 使用联想输入的input的id
input: "mapInput"
}
this.auto = new AMap.AutoComplete(autoOptions);
this.placeSearch = new AMap.PlaceSearch({
map: this.map,
// panel: "panel", // 结果列表将在此容器中进行展示。
// city: "010", // 兴趣点城市
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
extensions: 'base' //返回基本地址信息
});
this.auto.on("select", this.select);//注册监听，当选中某条记录时会触发
}).catch(e => {
console.log(e);
});
},
select(e) {
this.placeSearch.setCity(e.poi.adcode);
this.placeSearch.search(e.poi.name); //关键字查询查询
}
},
};
</script>
<style scoped>
#bai-du-map {
overflow: hidden;
width: 400px;
height: 300px;
margin: 0;
font-family: "微软雅黑";
position: absolute;
right: 35%;
top: 40%;
}
</style>
<style scoped lang="less">
/* 隐藏高德logo */
.amap-logo {
display: none !important;
}
/* 隐藏高德版权 */
.amap-copyright {
display: none !important;
}
</style>
最后就大功告成了
