vue 集成高德地图进行批量标注和信息窗体展示

我就是我 2022-04-13 08:17 963阅读 0赞

### **                                    vue 集成高德地图进行批量标注和信息窗体展示** ###

**         ** 高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能，其实高德api里面已经清楚的说明怎么用了，但是自己总结一下记录在自己的笔记里，也是有些许好处的。高德api 样列展示地址是：[https://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multiple-markers][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][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_lbs.amap.com_api_javascript-api_example_infowindow_add-infowindows-to-multiple-markers]: 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]: https://lbs.amap.com/api/amap-ui/demos/amap-ui-simpleinfowindow/events