高德地图——地图渲染及关键字搜索POI功能vue2/web端
文章目录
- 一、注册key
- 二、引入高德地图
- 三、实现代码
-
- template
- script
- style
一、注册key
https://lbs.amap.com/，注册账号登录之后
-
应用管理----我的应用----创建新应用
-
新建应用填写
-
添加key填写
二、引入高德地图
npm i @amap/amap-jsapi-loader --save
三、实现代码
本文将分为版本1和版本2进行编写
使用场景：
版本1：普通的页面
版本2：在弹窗或者页面嵌套
按需而取其中一个版本复制粘贴即可
template
版本1：
<div>
<div class="mapSearch">
<el-input
placeholder="请输入你要查找的关键词"
v-model="userInput"
id="tishikuang"
></el-input>
<el-button type="primary" @click="biu">确定选址</el-button>
</div>
<div id="container"></div>
</div>
版本2：
我碰到的一个不显示地图的原因：没把以上代码放在 footer slot 中
dialog 组件中的 footer slot 是实时渲染的，放在其中的 dom 元素才可以直接获取，这里说明一下不显示的原因是：
Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。
（。。T A T。。）
<el-dialog
:title="titleEdit"
:visible.sync="openEdit"
width="1200px"
append-to-body
center
>
<div slot="footer" class="dialog-footer">
<div>
<div class="mapSearch">
<el-input
placeholder="请输入你要查找的关键词"
v-model="userInput"
id="tishikuang"
></el-input>
<el-button type="primary" @click="biu">确定选址</el-button>
</div>
<div id="container"></div>
</div>
</div>
</el-dialog>
script
版本1：
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '安全密钥'//在这里填写你的安全密钥
}
export default {
data() {
return {
map: null,
autoOptions: {
input: 'tishikuang' //绑定的搜索关键字的input标签ID，用这个注册
},
auto: null,
userInput: '', //绑定的搜索关键字的的内容
placeSearch: null,
searchHere: null, //根据搜索组件搜索到以后的地点信息
}
},
mounted() {
this.initMap()
},
methods: {
// poi搜索以后 点击确认选址以后的操作
biu() {
if (this.searchHere) {
this.$message({
message: '确认地点：'+this.searchHere.name,
type: 'success'
});
// this.$emit('mapHere',this.searchHere);
alert(`地址数据都在data里面this.searchHere，包括经纬度，以及其他各种地址信息，该有的都有，当poi搜索以后select(e){}方法里面的参数e就是地址信息，我把单独拿出来。地点名：`+this.searchHere.name)
}
},
initMap() {
AMapLoader.load({
key: "填写你的key值", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',
'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("container", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 17, //初始化地图级别
center: [105.602725, 37.076636], //初始化地图中心点位置
});
//引入高德地图的空间绑定使用
this.map.addControl(new AMap.Scale())
this.map.addControl(new AMap.ToolBar())
this.map.addControl(new AMap.HawkEye())
this.map.addControl(new AMap.MapType())
this.map.addControl(new AMap.Geolocation())
this.auto = new AMap.AutoComplete(this.autoOptions)
//
this.placeSearch = new AMap.PlaceSearch({
map: this.map
}) //构造地点查询类
this.auto.on('select', this.select)//绑定查询事件
}).catch(e => {
console.log(e);
})
},
//poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有
select(e) {
this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索
this.placeSearch.search(e.poi.name) //关键字查询查询
this.map.setZoom(10,true)
this.searchHere = e.poi
this.$message({
message: '选择地点:' + this.searchHere.name,
type: 'success'
});
}
},
}
版本2：
这里一定要注意不能在钩子函数里初始化地图，要在打开弹窗的方法里初始化。
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
securityJsCode: '安全密钥'//在这里填写你的安全密钥
}
export default {
data() {
return {
map: null,
autoOptions: {
input: 'tishikuang' //绑定的搜索关键字的input标签ID，用这个注册
},
auto: null,
userInput: '', //绑定的搜索关键字的的内容
placeSearch: null,
searchHere: null, //根据搜索组件搜索到以后的地点信息
}
},
methods: {
// poi搜索以后 点击确认选址以后的操作
biu() {
if (this.searchHere) {
this.$message({
message: '确认地点：'+this.searchHere.name,
type: 'success'
});
// this.$emit('mapHere',this.searchHere);
alert(`地址数据都在data里面this.searchHere，包括经纬度，以及其他各种地址信息，该有的都有，当poi搜索以后select(e){}方法里面的参数e就是地址信息，我把单独拿出来。地点名：`+this.searchHere.name)
}
},
initMap() {
AMapLoader.load({
key: "填写你的key值", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',
'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("container", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 17, //初始化地图级别
center: [105.602725, 37.076636], //初始化地图中心点位置
});
//引入高德地图的空间绑定使用
this.map.addControl(new AMap.Scale())
this.map.addControl(new AMap.ToolBar())
this.map.addControl(new AMap.HawkEye())
this.map.addControl(new AMap.MapType())
this.map.addControl(new AMap.Geolocation())
this.auto = new AMap.AutoComplete(this.autoOptions)
//
this.placeSearch = new AMap.PlaceSearch({
map: this.map
}) //构造地点查询类
this.auto.on('select', this.select)//绑定查询事件
}).catch(e => {
console.log(e);
})
},
//poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有
select(e) {
this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索
this.placeSearch.search(e.poi.name) //关键字查询查询
this.map.setZoom(10,true)
this.searchHere = e.poi
this.$message({
message: '选择地点:' + this.searchHere.name,
type: 'success'
});
},
/** 打开站点编辑按钮操作 */
handleUpdate_bj(row) {
this.initMap();
},
},
}
style
版本1:
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 500px;
}
.mapSearch {
display: flex;
margin-bottom: 8px;
.el-button {
margin-left: 8px;
}
}
#tishikuang {
margin-bottom: 200px;
display: block;
}
版本2：
- 在本页面（渲染地图的页面）：
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 500px;
}
.mapSearch {
display: flex;
margin-bottom: 8px;
.el-button {
margin-left: 8px;
}
}
#tishikuang {
margin-bottom: 200px;
display: block;
}
- 在public文件下的index.html里：
高德地图搜索框没有效果的原因可能是因为搜索的结果在地图的图层底下，所以不显示，疯狂在本页面进行css穿透改各种样式，结果还是不生效，没办法那就在全局样式中加了一段
这里记录一下css样式级别：行内>内部>外部，全局>页面
而这次在全局里写样式是因为我这段高德地图是引入第三方的东西，它的css可能不在我的本页面内存放或者级别高于我本页面的样式，所以在本页面穿透解决不了它，在全局可以解决
有一个要注意的是，级别越高，影响越大，例如在本项目的其它地方使用到class='amap-sug-result’时，它都会添加以下样式了，所以在能实现的基础上，级别越低越好
.amap-sug-result {
z-index: 2999!important;
}