Vue2.X按 NPM 方式局部引用 高德amap-jsapi-loader
功能包括：
1.多次点击地图只有一个标点覆盖物、
2.根据经纬度查询地址、
3.地图与卫星图切换、
4.根据地名搜索展示查询的列表、
5.点击地图展示经纬度和地名
效果图如下：
正式开工
第一步：NPM包引入
在项目终端Powershell输入如下
npm i @amap/amap-jsapi-loader --save
第二步：局部引入
在需要的vue页面
// <!-- 高德地图用来获取经纬度转换地址使用的-->
window._AMapSecurityConfig = {
securityJsCode: '你的高德key',
}
//引入的包
import AMapLoader from '@amap/amap-jsapi-loader'
第三步：初始化创建地图
template里代码
<div>
<div class="map-search">
<a-form-model-item label="地图" prop="keywords" style="margin-left: -80px">
<a-input-search
placeholder="请输入地名后按回车键搜索"
v-model="form.keywords"
class="search-input"
@search="onSearch"
/>
<span class="clear-coord" @click="clearCoord" style="margin-left: 10px">重置</span>
</a-form-model-item>
</div>
<div class="show-map">
<!-- //container是地图容器id -->
<div id="container"></div>
<ul v-if="resultList.length" style="left: 0px">
<li
class="flex map-list cursor"
v-for="item in resultList"
:key="item.id"
@click="selectAddress(item)"
>
<svg-icon icon-class="map_coord" />
<div>
<p title="item.name"><span>名称:</span>{{ item.name }}</p>
<p title="item.address"><span>地址:</span>{{ item.address || '暂无详细地址!' }}</p>
</div>
</li>
</ul>
</div>
<div class="flex map-coord">
<a-form-model-item label="经度:" prop="lng">
<a-input v-model="form.lng" />
</a-form-model-item>
<a-form-model-item label="纬度:" prop="lat"> <a-input v-model="form.lat" /></a-form-model-item>
</div>
</div>
script里的代码：
//data申明的变量
data() {
return {
cityinfo: '', //IP定位城市
map: null, //地图
resultList: [], //搜索结果列表
form: {
lng: '114.329268',//经纬度设置的默认值
lat: '30.578576',//经纬度设置的默认值
keywords: '', //搜索关键字
},
//地图搜索的列表页
pagination: {
pageIndex: 1,
pageSize: 10,
total: 0,
},
//地图标记变量
marker: null,
}
}
//mounted生命周期里创建地图
mounted() {
this.$nextTick(() => {
this.initMap()
})
}
//methods里申明封装方法
methods: {
//初始化地图
initMap() {
//地图销毁
if (this.map != null || this.map != undefined) {
this.map && this.map.destroy()
}
AMapLoader.load({
key: '你的高德key', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15（踩坑：2.0.0版本的有问题建议设置低版本）
plugins: [
'AMap.ToolBar',
'AMap.Scale',
'AMap.MapType',
'AMap.Geolocation',
'AMap.CitySearch',
'AMap.PlaceSearch',
'AMap.Geocoder',
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
zoom: 17,
center: [this.form.lng, this.form.lat], //中心点坐标
resizeEnable: true,
})
.then((AMap) => {
var _that = this
var map = new AMap.Map('container')
//添加地图点击事件
var clickHandler = function (e) {
if (_that.marker != null || _that.marker != undefined) {
map.remove(_that.marker)
}
_that.marker = new AMap.Marker({
position: [e.lnglat.getLng(), e.lnglat.getLat()], //位置
})
map.add(_that.marker) //添加到地图
_that.map = map
_that.form.lng = e.lnglat.getLng()
_that.form.lat = e.lnglat.getLat()
//根据经纬度查询地址
_that.regeoCode()
}
//初始化添加标记
_that.marker = new AMap.Marker({
position: [_that.form.lng, _that.form.lat], //位置
})
map.add(_that.marker) //添加到地图
// 绑定事件
map.on('click', clickHandler)
//查询城市
_that.regeoCode()
map.setCenter([_that.form.lng, _that.form.lat]) //设置地图中心点
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar())
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale())
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType())
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
map.addControl(new AMap.Geolocation())
})
.catch((e) => {
console.log(e)
// this.$message.error(e)
})
},
//根据经纬度查询地址
regeoCode() {
var lnglat = [this.form.lng, this.form.lat]
var geocoder = new AMap.Geocoder({
radius: 1000, //范围，默认：500
})
var _that = this
geocoder.getAddress(lnglat, function (status, result) {
console.log(result)
if (status === 'complete' && result.regeocode) {
var address = result.regeocode.formattedAddress
_that.form.keywords = address
_that.cityinfo = address
} else {
_that.$message.error('根据经纬度查询地址失败')
}
})
},
// 选择查询列表的地址在地图上标记并且载入标记点的经纬度和地址名称
selectAddress(item) {
var _this = this
this.form.lng = item.location.lng
this.form.lat = item.location.lat
this.initMap()
},
//重置地图
clearCoord() {
this.initMap()
this.form = this.$options.data().form
},
//地图搜索
onSearch(value) {
var _this = this
this.form.keywords = value
var autoOptions = {
city: _this.cityinfo,
pageSize: _this.pagination.pageSize, //每页结果数,默认10
pageIndex: _this.pagination.pageIndex, //请求页码，默认1
}
var placeSearch = new AMap.PlaceSearch(autoOptions)
placeSearch.search(_this.form.keywords, function (status, result) {
// 搜索成功时，result即是对应的匹配数据
console.log(result, '搜索结果')
_this.resultList = result.poiList.pois
_this.pagination.pageSize = result.poiList.pageSize
_this.pagination.pageIndex = result.poiList.pageIndex
_this.pagination.total = result.poiList.count
var pois = result.poiList.pois
for (var i = 0; i < pois.length; i++) {
var poi = pois[i]
_this.marker = new AMap.Marker({
position: [poi.location.lng, poi.location.lat], // 经纬度对象，也可以是经纬度构成的一维数组
title: poi.name,
})
_this.form.keywords = poi.name
_this.cityinfo = poi.name
}
})
},
}
css的代码
//这个是搜索框
.search-input {
width: 400px;
/deep/.ant-input {
border-radius: 20px;
}
}
//这个是搜索列表的css
.show-map {
position: relative;
ul {
padding: 10px;
position: absolute;
top: 10px;
right: -35px;
width: 200px;
height: 310px;
background-color: #f1f1f1;
overflow-y: scroll;
}
.map-list {
padding-top: 10px;
align-items: center;
border-bottom: 1px solid #ccc;
.svg-icon {
font-size: 16px;
margin-right: 8px;
}
p {
width: 150px;
margin-bottom: 10px;
font-size: 12px;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
span {
margin-right: 5px;
}
}
}
}
//这个是重置按钮
.clear-coord {
color: #317ffb;
}
//这个是定义地图的大小
#container {
width: 530px;
height: 330px;
}
踩坑总结：
1.高德地图版本建议选择低于2.0.0，我选择的是1.4.15，因为2.0.0地图老是灰的无法显示太坑了
2.生命周期，初始化在mounted里或watch里
3.一定要声明window._AMapSecurityConfig的securityJsCode，不然经纬度查询地址报错异常
4.根据屏幕大小自动展示地图的大小，在最外层div 带上ref=“test”，然后声明mounted里如下
var backtop = this.$refs.container
backtop.style.height = this.$refs.test.offsetHeight + 'px'
backtop.style.width = this.$refs.test.offsetWidth + 'px'
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
