大家好，又见面了，我是你们的朋友全栈君。
vue 集成高德地图进行批量标注和信息窗体展示
高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能，其实高德api里面已经清楚的说明怎么用了，但是自己总结一下记录在自己的笔记里，也是有些许好处的。高德api 样列展示地址是：https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers,以及点击窗体监听事件https://lbs.amap.com/api/amap-ui/demos/amap-ui-simpleinfowindow/events，两个样列基本就实现了我们的功能，可以点击参考。
首先我们看一下所运行的效果如图所示：（图片稍后补上，因为现在接口地址已经变动，暂未部署服务器）
其次我们看一下实现思路：
一、vue引入原生高德地图
1、index.html里面加入,高德js一定要放在头部而不是尾部，否则就会报 “AMap is not defined”
<!-- 高德地图 -->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=26bf121b06524b0657b09gkjklgjkeeb3990c"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>2、build 的webpack.base.conf.js文件里面加入
externals: {
AMap: 'AMap',
AMapUI: 'AMapUI'
}3、引用高德地图界面加入以下内容即可以使用地图
import AMap from 'AMap'
import AMapUI from 'AMapUI'二、高德地图界面vue代码参考，主要看getToliteList（）这个方法里面的实现
<template>
<div class="scenicTolietWrapper">
<v-header :title="title">
</v-header>
<div id="container" :style="{height: heightTemp + 'px', width: widthTemp + 'px'}"></div>
<div class="guideWrapper" style="display: flex; justify-content: space-between;">
<div></div>
<div><i class="icon iconfont icon-daohang"/></div>
</div>
<actionsheet v-model="showMap" :menus="menusMap" :show-cancel="true" @on-click-menu="clickMapMenu"></actionsheet>
<div class="alertWrapper">
<div>
<confirm v-model="showGaoDei"
title="操作提示"
@on-cancel="onCancelGaoDei"
@on-confirm="onConfirmGaoDei">
<p style="text-align:center;">您尚未安装常用地图，小嗨为您推荐安装高德地图</p>
</confirm>
</div>
</div>
</div>
</template>
<script>
import VHeader from '@/components/v-header/v-header'
import AMap from 'AMap'
import AMapUI from 'AMapUI'
import { isIphoneX, isAndroid, isIOS } from '@/assets/js/brower'
import { Actionsheet, Confirm } from 'vux'
import axios from '@/api/axiosApi'
var map
export default {
data () {
return {
title: '旅游厕所',
heightTemp: 500,
widthTemp: 1000,
tolietList: [],
// 跳转地图
showMap: false,
menusMap: {},
showGaoDei: false,
showCancel: true,
latitude: '',
longitude: '',
address: ''
}
},
directives: {
},
components: {
VHeader,
AMap,
AMapUI,
Actionsheet,
Confirm
},
computed: {
},
mounted() {
if (isIphoneX()) {
this.heightTemp = window.innerHeight - 73
} else {
this.heightTemp = window.innerHeight - 63
}
this.widthTemp = window.innerWidth
this.init()
},
created() {
},
methods: {
// 获取厕所数据
getToliteList () {
axios.get(this, '/v1/toiletInfo/getToiletInfo?pageNum=1&pageSize=50', null, (data) => {
this.tolietList = data
let _self = this
// 地图初始化
map = new AMap.Map('container', {
resizeEnable: true,
zoom: 10
})
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
})
// 覆盖默认的dom结构
AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
var marker
// 循环进行图标标注marker
_self.tolietList.forEach(element => {
marker = new AMap.Marker({
map: map,
zIndex: 9999999,
position: [element.longitude, element.latitude]
})
// 自定义弹出信息窗体样式和数据绑定
var infoWindow = new SimpleInfoWindow({
infoTitle: '<strong style="font-size: 15px">' + element.name + '</strong>',
infoBody: ['<div class="guideWrapper" style="display: flex; justify-content: space-between;">',
'<div style="font-size: 14px">' + element.address + '</div> ',
'<div><i class="icon iconfont icon-daohang"/></div>',
'</div>'].join(''),
// 基点指向marker的头部位置（信息窗体的具体位置）
offset: new AMap.Pixel(0, -31)
})
// maker标注点击事件后弹信息窗体
marker.on('click', openInfoWin)
// 点击弹出信息窗体上面的导航图标事件
infoWindow.get$Container().on('click', '.icon-daohang', function(event) {
event.stopPropagation()
_self.toNativeMap(element.latitude, element.longitude, element.address)
})
function openInfoWin(e) {
infoWindow.open(map, e.target.getPosition())
}
})
})
})
},
init () {
const _self = this
_self.getToliteList()
},
// 跳转导航
toNativeMap (latitude, longitude, address) {
if (isIOS()) {
window.webkit.messageHandlers.NativeMethod.postMessage({'methodName': 'openMapNavi', 'latitude': latitude, 'longitude': longitude})
} else {
// android
this.menusMap = JSON.parse(window.android.isInstallByread())
if (this.menusMap == null || Object.getOwnPropertyNames(this.menusMap).length === 1) {
this.showCancel = false
this.showGaoDei = true
return
}
if (this.menusMap.baiDu === '2') {
this.menusMap.baiDu = '百度地图'
}
if (this.menusMap.gaoDei === '1') {
this.menusMap.gaoDei = '高德地图'
}
if (this.menusMap.tenXun === '3') {
this.menusMap.tenXun = '腾讯地图'
}
this.showMap = true
this.latitude = latitude
this.longitude = longitude
this.address = address
}
},
clickMapMenu (value) {
if (isAndroid()) {
if (value === 'baiDu') {
window.android.makeUpMap(this.latitude, this.longitude, this.address, '', 2, 1, '')
} else if (value === 'gaoDei') {
window.android.makeUpMap(this.latitude, this.longitude, this.address, '', 1, 1, '')
} else if (value === 'tenXun') {
window.android.makeUpMap(this.latitude, this.longitude, this.address, '', 3, 1, '')
}
}
},
// 确认弹框友好提示
onCancelGaoDei () {
},
onConfirmGaoDei () {
window.android.makeUpMap(this.latitude, this.longitude, this.address, 0, 1, '')
}
}
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'
.scenicTolietWrapper {
#container {
width: 500px;
height: 800px;
}
.guideWrapper {
display flex
justify-content space-between
}
}
</style>
查看getToliteList（）该方法即可知道怎么实现。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143528.html原文链接：https://javaforall.net
