精华内容
下载资源
问答
  • 2018-11-28 15:17:23

                                        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>&nbsp;',
                    '<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()该方法即可知道怎么实现。

    更多相关内容
  • Openlayers绘制地图标注

    2021-01-18 17:04:02
    本文实例为大家分享了Openlayers绘制地图标注的具体代码,供大家参考,具体内容如下 1、标注的简介 标注简单点说就是通过图标、文字等方式将我们想展示的内容显示在地图上,着重突出人们所关注的专题内容,从而为...
  • 主要介绍了php+js实现百度地图多点标注的方法,涉及php结合js针对百度地图接口调用与json操作相关技巧,需要的朋友可以参考下
  • 地图标注工具

    2017-02-12 23:09:27
    在谷歌地图,百度地图,高德地图上面标注信息
  • 百度地图点击标注,弹出窗口
  • 把下面这段代码复制到百度地图的demo中运行,效果就是我想设计的效果。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta ...
  • 保证没有任何功能限制 电脑离线电子地图标注软件主要功能如下:可以标注位置,可以搜索地图上本来有的位置和标注的位置,可以把某个标注的位置显示在地图中心。软件支持电脑在线下载地图后(离线)地图查看浏览, 1....
  • 主要介绍了利用python和百度地图API实现数据地图标注的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用高德地图显示多个标注点 有 弹跳效果 可自定义 title
  • python实现直接读取excle数据实现的百度地图标注,https://blog.csdn.net/weixin_41290949/article/details/120638695
  • 主要介绍了微信小程序获取位置展示地图标注信息的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇Python 给定的经纬度标注地图上的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • leaflet-地图文字标注

    2018-10-30 10:12:52
    可以在leaflet地图上添加文字标注,可以自己设置样式,有背景色或者无背景色
  • vue中引入高德地图并多点标注

    千次阅读 2022-03-07 21:33:21
    vue中引入高德地图并多点标记 步骤: 通过vue的方法引入地图 初始化地图,设置宽和高 信息窗口实例 遍历生成多个标记点 首先在项目的public下的index.html中引入地图 <link rel="stylesheet" href=...

    vue中引入高德地图并多点标记

    步骤:

    • 通过vue的方法引入地图
    • 初始化地图,设置宽和高
    • 信息窗口实例
    • 遍历生成多个标记点
    • 首先在项目的public下的index.html中引入地图

    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
    
    

    上代码(注释)

    <template>
      <div>
      //为地图设置宽和高
        <div id="container" style="width: 100%;height: 700px"></div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
        //假数据   经纬度
          lnglats: [
            [113.922282,35.332887],
    	    [113.963101,35.318516],
    	    [113.960801,35.306263],
    	    [113.926809,35.301255]
          ],
        }
      },
      mounted() {
        this.carGPSIP()
      },
      methods: {
        carGPSIP() {
          var map = new AMap.Map("container", {resizeEnable: true});//初始化地图
          //信息窗口实例
          var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
          //遍历生成多个标记点
          for (var i = 0, marker; i < this.lnglats.length; i++) {
            var marker = new AMap.Marker({
              position: this.lnglats[i],//不同标记点的经纬度
              map: map
            });
            marker.content = '我是第' + (i + 1) + '个Marker';
            marker.on('click', markerClick);
            marker.emit('click', {target: marker});//默认初始化不出现信息窗体,打开初始化就出现信息窗体
          }
          function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          }
          map.setFitView();
          }
        },
    }
    </script>
    <style>
    </style>
    
    展开全文
  • 百度地图标注管理器。多marker的管理,更高效、解析更快。 基于Baidu Map API 1.2 。
  • ArcGIS Server地图服务标注如何使用斜体字形?-附件资源
  • 原生js实现的百度地图API选择公司位置获取地址地图标注代码,适合多个分公司地址地图标记切换查看。
  • android 百度地图开发 在地图上用已知经纬度标记一个标注
  • [图]Flash+ASP实现电子互动地图在线标注功能
  • 百度地图API通过经纬度显示地理位置,并显示该位置的所有相关信息
  • 因公司做公众号上用到了 百度地图 遇到了只能标注10个 之后的解决方案
  • android 百度地图标注

    2019-05-05 15:07:07
    android 百度地图开发 在地图上用已知经纬度标记一个 标注
  • JS全国销售城市标注地图特效是一款基于echarts.js制作的中国地图全国销售网点分布特效。
  • 基于echarts制作中国地图全国销售网点分布特效。支持自定义设置热点城市标注
  • 百度地图的添加标注工具类,对外开放。 允许用户在地图上点击后添加一个点标注,允许用户设定标注的图标样式。 主入口类是MarkerTool, 基于Baidu Map API 1.2。
  • 离线百度地图标注点弹窗实例, 离线百度地图标注点弹窗实例 离线百度地图标注点弹窗实例 离线百度地图标注点弹窗实例

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,226
精华内容 13,690
关键字:

地图地点标注

友情链接: xxcount.rar