vue地图插件_vue好的地图插件 - CSDN
精华内容
参与话题
  • 这是一个h5页面– 效果图 录图的时候网络条件不是很好,wifi卡了,所以数据...正确安装了vue 使用vue-cli可以快速开发 <script type="text/javascript" src="http://api.map.baidu...

    这是一个h5页面–

    效果图

    录图的时候网络条件不是很好,wifi卡了,所以数据加载有点慢。当网络情况不好的时候,这个组件还需要进一步的优化

    前置条件

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAK"></script>
    

    功能点分解

    1. 分析数据
    2. 实现css布局
    3. 挂载百度map
    4. 定位当前位置
    5. 获取周边poi
    6. 搜索提示
    7. 点击右下角图标重新定位到当前位置
    8. 固定中心点,拖拽地图选择位置

    分析数据

    根据UI图分析组件需要用到哪些数据。

        data(){
          return {
            map:null,//实例化map
            searchValue:"",//搜索model
            currentAddress:"",//当前定位的地址
            point:{},//当前地址的经纬度
            poiKeyword:"",//周边的关键词,用来搜索,从adress中获取street拼接
            potentialLocation:[],//周边信息
          }
        }
    

    css布局

    这样的布局很简单,请随意发挥

    挂载百度map

    initMaps(){
            this.map = new BMap.Map("map");
            let mPoint = new BMap.Point(116.404, 39.915);//天安门
            this.map.centerAndZoom(mPoint,18);
           }
    

    为了确保dom成功创建了,我们在nextTick中进行初始化

    mounted(){
          this.$toast({text:"点击或拖动选址~",position:"top"});//提示信息
          this.$nextTick(()=>{
            this.initMaps();//调用初始化函数
          })
    

    到这里我们应该能在idmap中的div里能够看到地图了

    定位

    我们调用百度提供的api进行定位,这里api定位的内部实现我猜测是基于h5的navigator。
    在这里插入图片描述
    根据警告提示,我们进去源码看看
    在这里插入图片描述
    警告信息说的是需要安全的origin,这里由于是在本地开发环境我们可以忽略这个警告。到了线上还是需要https的,不然遇到dns劫持也是很麻烦的。
    好的,现在实现locate方法用于定位:

     locate(){
            let map = this.map;
            let geolocation = new BMap.Geolocation();
            const vm = this;
            geolocation.getCurrentPosition(function(r){
              if(this.getStatus() === BMAP_STATUS_SUCCESS){
                let mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
              }else {
                console.log('failed ',this.getStatus());
              }
            });
    

    这里我们就成功定位到了当前所在位置,当然别忘记了在mounted方法里调用这个方法了。

    this.$nextTick(()=>{
            this.initMaps();
            this.locate();
          })
    

    显示当前位置

    刚刚在locate方法中获取到了当前的point值,也就是经纬度。那么如何显示地址信息呢?locate中回调函数参数r其实是包括了address信息的,但是!有时候address精确度只是到了城市级别–比如我这里console.log(r);打印出来的信息如下:
    在这里插入图片描述

    为了解决这个问题,我们需要从拿到的point对象入手,逆地址解析一次。
    这里我们创建一个analyze函数调用百度的getLocation方法进行解析

          /**
           * Attention: 解析地址会有异常--有时候会解析正确,有时候只会解析到区
           * @param point lng and lat
           */
            analyze(point){//point:{lat:"",lng:""}
            const geoc = new BMap.Geocoder();
            geoc.getLocation(point, rs=>{
              this.point = rs.point;
              this.currentAddress = rs.address;
              this.poiKeyword = rs.street||rs.address;
            });
          },
    

    并利用vue的数据响应相应的更新当前位置,当前经纬度,当前poiKeyword
    poiKeyword有值了应该做什么呢?我们就可以开始根据point来搜索周边,提供周围的位置信息啦。
    那么这里我们为poiKeyword创建一个监听器,进行实时操作。

        watch:{
          poiKeyword(n){
            this.getAroundPOI(["栋","店","小区","学校","餐饮",n]);//n就是最新值
          }
        }
    

    实现getAroundPOI函数

    在监听器中我们提供了poi的搜索关键词,于是我们可以调用百度地图LocalSearchsearchNearby函数。这里我们搜索周围方圆1000m的周边数据。

    getAroundPOI(keyword){
            let map = this.map;
            let mPoint = new BMap.Point(this.point.lng, this.point.lat);
            let vm = this;
            let local =  new BMap.LocalSearch(map, {
              onSearchComplete(results){
                if (local.getStatus() === BMAP_STATUS_SUCCESS){
                  let temp = [];
                  results.forEach(item=>{
                    temp = temp.concat(item.Ar);
                  });
                  vm.potentialLocation = temp;//更新ui
                }else{
                  console.warn("get poi error ,code -> ",local.getStatus());
                }
              }
            });
            local.searchNearby(keyword,mPoint,1000);
          },
    

    onSearchComplete回调中更新potentialLocation的值之后vue会帮助我们更新这部分ui

    搜索提示

    百度地图的搜索提示其实很简单,只需要创建一个自动装填对象。搜索下拉提示框会根据你传入的input参数(input id)进行定位,宽度与input相同。

    getSuggestion(){
            let ac = new BMap.Autocomplete({"input" : "suggestId","location" : this.map});
            ac.addEventListener("onconfirm", e=> {
              let _value = e.item.value;
              this.searchValue = _value.province + _value.city + _value.district + _value.street + _value.business;
              this.setPlace(this.searchValue);
            });
          },
    

    在上述代码中,我们定义了自动装填对象的监听器(点击下拉列表项时触发),并更新了input的值,在vue中我们一般用v-model进行双向绑定。
    获取到了地址信息之后,我们调用了setPlace方法并传入了搜索值。
    setPlace方法主要用作给地图重定位,移动地图中心到搜索值所在地点。

     setPlace(val){
            let map = this.map;
            map.clearOverlays();
            const vm = this;
            let local = new BMap.LocalSearch(map, {
              onSearchComplete(){
                let pp = local.getResults().getPoi(0).point;
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));
                vm.analyze(pp);
              }
            });
            local.search(val);
          }
    

    同时,注意在上面的代码中我们调用了analyze方法,用来更新周边信息。为什么能更新呢,忘了就往上翻回去看看analyze方法是怎么实现的吧。

    重定位及拖拽中心

    为了实现这个需求,首先我们要想办法地图上的自定义控件。自定义控件很麻烦,而且也会影响网页性能,所以我们应该另辟蹊径。论坛上其实有更简单的方法,这里我将论坛中的思路实现了。
    关键就在于将控件看成网页的dom去相对于百度canvas地图进行定位。
    看一下dom结构:

    <div class="map-wrapper">
          <div id="map"></div>
          <img class="position" src="../../assets/icon/position.svg" alt="position">
          <img class="nowposition" @click="locate" src="../../assets/icon/nowposition.svg" alt="nowposition">
        </div>
    

    以及css

     .map-wrapper{
          height: 50%;
          position: relative;
    
          #map{
            height: 100%;
          }
          img{
            width: 32px;
            object-fit: contain;
          }
          .position{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-75%);//The bottom of the icon is centered,75  = 50(center) + 25(top)
            z-index: 100;
          }
          .nowposition{
            position: absolute;
            right: 20px;
            bottom:20px;
            z-index: 100;
          }
          }
    

    这里要注意的一点就是利用position以及translate(-50%,-50%)居中以后为什么要上调25%?因为中间的图标是尖尖的,肉眼更倾向于利用图标的底部(那个尖尖)进行定位。我们给它的样式是正方形,并且是contain的,所以x轴是正好居中的不用管。但是y轴的问题是这样做仅仅是将y的中心点放在地图的中心位置,会有一点点的纬度偏差。我们应该与肉眼保持一致,因此需要将底部位于地图的正中心。因此我们还要上调25%。(自身高度的一半,因为就剩一半了)

    为了能够让中心点定位,我们还需要给map注册一个监听器。
    initMaps方法中加上一个监听器。

     this.map.addEventListener('dragend',()=>{
              let pixel = this.map.pointToOverlayPixel(this.map.getCenter());
              let point = this.map.overlayPixelToPoint({x:pixel.x,y:pixel.y});
              this.analyze(point);
            })
    

    在方法的回调里再调用analyze方法重新获取poi,实时更新周边位置信息。

    源码

    <template>
      <div class="ys-map">
    
        <div class="map-wrapper">
          <div id="map"></div>
          <img class="position" src="../../assets/icon/position.svg" alt="position">
          <img class="nowposition" @click="locate" src="../../assets/icon/nowposition.svg" alt="nowposition">
        </div>
    
        <div id="tips">
          <AddressItem :title="'当前位置'" :address="currentAddress" :extra="'(以图上标记位置为准)'"/>
          <AddressItem v-for="(item,index) in potentialLocation" v-bind:key="index" :title="item.title" :address="item.address" @click.native="selectAddress(item)"/>
          <div v-if="potentialLocation.length===0">{{point.lng}},{{point.lat}}</div>
        </div>
    
        <div class="ys-search-address">
          <img class="back" src="../../assets/icon/back.svg" alt="back" @click="onBackClick">
          <div class="ys-search-wrapper">
            <input type="text" v-model="searchValue" title="" id="suggestId" placeholder="定位不准?试试手动输入">
            <img src="../../assets/icon/close.svg" alt="search" @click="searchValue=''">
          </div>
          <a class="okBtn" href="javascript:;" @click="onOkClick">确定</a>
        </div>
    
        <div class="search-tips" id="result">
          tips
        </div>
      </div>
    </template>
    
    <script>
      import AddressItem from "./AddressItem";
      export default {
        name: "Map",
        components: {AddressItem},
        mounted(){
          this.$toast({text:"点击或拖动选址~",position:"top"});
          this.$nextTick(()=>{
            this.initMaps();
            this.locate();
            this.getSuggestion();
          })
        },
        methods:{
          initMaps(){
            this.map = new BMap.Map("map");
            let mPoint = new BMap.Point(116.404, 39.915);//Tiananmen Square
            this.map.centerAndZoom(mPoint,18);
            this.map.addEventListener("click", this.onMapClicked);
            this.map.addEventListener('dragend',()=>{
              let pixel = this.map.pointToOverlayPixel(this.map.getCenter());
              let point = this.map.overlayPixelToPoint({x:pixel.x,y:pixel.y});
              this.analyze(point);
            })
          },
          locate(){
            let map = this.map;
            let geolocation = new BMap.Geolocation();
            const vm = this;
            geolocation.getCurrentPosition(function(r){
              if(this.getStatus() === BMAP_STATUS_SUCCESS){
                let mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                vm.analyze(r.point);
              }else {
                console.log('failed ',this.getStatus());
              }
            });
            //loading--
          },
          getAroundPOI(keyword){
            let map = this.map;
            let mPoint = new BMap.Point(this.point.lng, this.point.lat);//h5 112.983323,28.141431
            let vm = this;
            let local =  new BMap.LocalSearch(map, {
              onSearchComplete(results){
                if (local.getStatus() === BMAP_STATUS_SUCCESS){
                  let temp = [];
                  results.forEach(item=>{
                    temp = temp.concat(item.Ar);
                  });
                  vm.potentialLocation = temp;
                }else{
                  console.warn("get poi error ,code -> ",local.getStatus());
                }
              }
            });
            local.searchNearby(keyword,mPoint,1000);
          },
          /**
           * Attention: 解析地址会有异常--有时候会解析正确,有时候只会解析到区
           * @param point lng and lat
           */
          analyze(point){//point:{lat:"",lng:""}
            const geoc = new BMap.Geocoder();
            geoc.getLocation(point, rs=>{
              this.point = rs.point;//===r.point
              this.currentAddress = rs.address;
              this.poiKeyword = rs.street||rs.address;
            });
          },
          /**
           * search tips
           */
          getSuggestion(){
            let ac = new BMap.Autocomplete({"input" : "suggestId","location" : this.map});
            ac.addEventListener("onconfirm", e=> {
              let _value = e.item.value;
              this.searchValue = _value.province + _value.city + _value.district + _value.street + _value.business;
              this.setPlace(this.searchValue);
            });
          },
          selectAddress(item){
            //todo: return item the same as onOkClicked function
          },
          setPlace(val){
            let map = this.map;
            map.clearOverlays();
            const vm = this;
            let local = new BMap.LocalSearch(map, {
              onSearchComplete(){
                let pp = local.getResults().getPoi(0).point;
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));
                vm.analyze(pp);
              }
            });
            local.search(val);
          },
          onMapClicked(e){
            console.log(e);//todo: get point with dialog and return
          },
          onBackClick(){
            //todo: cancel
          },
          onOkClick(){
            //todo: get this address and return.
            console.log("已选中当前位置!");
            console.log(this.currentAddress,this.point)
          }
        },
        data(){
          return {
            map:null,
            searchValue:"",
            currentAddress:"",
            point:{},
            poiKeyword:"",
            potentialLocation:[],
          }
        },
        watch:{
          poiKeyword(n){
            this.getAroundPOI(["栋","店","小区","学校","餐饮",n]);
          }
        }
      }
    </script>
    
    <style lang="less" scoped>
      .ys-map{
        height: 100%;
        overflow: hidden;
        position: relative;
        .map-wrapper{
          height: 50%;
          position: relative;
    
          #map{
            height: 100%;
          }
          img{
            width: 32px;
            object-fit: contain;
          }
          .position{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-75%);//The bottom of the icon is centered,75  = 50(center) + 25(top)
            z-index: 100;
          }
          .nowposition{
            position: absolute;
            right: 20px;
            bottom:20px;
            z-index: 100;
          }
    
        }
        #tips{
          width: 100%;
          height: 50%;
          overflow-y: scroll;
          position: relative;
          padding: 1px 12px;
        }
        .ys-search-address{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 50px;
    
          background: #f2f2f2;
          padding: 8px 0;
          display: flex;
          justify-content: space-around;
          align-items: center;
    
          .back{
            width: 20px;
            object-fit: contain;
          }
          .okBtn{
            background: #FFDF5C;
            padding: 5px 12px;
            border: 1px solid #ffcf6e;
            color: #333;
            border-radius: 8px;
          }
          .ys-search-wrapper{
            width: 68%;
            border-radius: 20px;
            background: rgba(0, 0, 0, .06);
    
            display: flex;
            align-items: center;
            input{
              padding: 8px 12px;
              background: transparent;
    
              width: 90%;
              height: 100%;
            }
    
            img{
              width: 12px;
              object-fit: contain;
            }
          }
        }
        .search-tips{
          position: absolute;
          left: 0;
          top: 50px;
          background: rgba(255,255,255,.8);
          border:1px solid #C0C0C0;
          height:auto;
          display:none;
        }
      }
    </style>
    
    
    展开全文
  • 本篇文章主要介绍了Vue的百度地图插件尝试使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue百度地图插件

    千次阅读 2019-07-11 11:23:55
    https://www.cnblogs.com/tuspring/p/9924522.html
    展开全文
  • vue map地图插件

    2020-09-08 08:49:10
    1、安装vue-baidu-map npm i vue-baidu-map 2、在mian.js中添加如下代码段 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 ...

    1、安装vue-baidu-map

    npm i vue-baidu-map

    2、在mian.js中添加如下代码段

    	import BaiduMap from 'vue-baidu-map'
    Vue.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
      ak: 'YOUR_APP_KEY'
    });
    

    3、使用

    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:600px;" @click="getClickInfo" :scroll-wheel-zoom='true'>
    </baidu-map>
    data() {
            return {
              center: {lng: xxx, lat: yyy},//lng代表纬度 lat代表经度
              zoom: 19
            }
          },
          methods: {
            handler({BMap, map}) {
              var point = new BMap.Point(xxx,yyy)
              map.centerAndZoom(point, 19)
              var marker = new BMap.Marker(point) // 创建标注
              map.addOverlay(marker) // 将标注添加到地图中
              var circle = new BMap.Circle(point, 1, {
                strokeColor: 'Red',
                strokeWeight: 1,
                strokeOpacity: 1,
                Color: 'Red',
                fillColor: '#f03'
              })
              map.addOverlay(circle)
            },
            getClickInfo(e) {
              console.log(e.point.lng)
              console.log(e.point.lat)
              this.center.lng = e.point.lng
              this.center.lat = e.point.lat
            }
          }

     

    展开全文
  • 高德的Vue地图插件

    千次阅读 2018-05-25 08:04:27
    直接在Vue中使用高德地图的JS API也不是很难的事,如果封装一下呢,使用起来就更方便了。 封装完后,使用的方式如下: &amp;lt;ginkgo-map ref=&quot;map&quot; class=&quot;gingo-map&quot...

    直接在Vue中使用高德地图的JS API也不是很难的事,如果封装一下呢,使用起来就更方便了。
    封装完后,使用的方式如下:

    <ginkgo-map ref="map" class="gingo-map" :gmapObj.sync="gmap" :options="mapOptions" :zoom.sync="zoom" :center.sync="center"
            :markers="markers" :polylines="polylines" :polygons="polygons" :circles="circles" :rectangles="rectangles" :texts="texts"
            :trackData="trackData" :trackOptions="trackOptions" :tracker.sync="tracker"
            :editData.sync="editData" :editer.sync="editer" :imageLayers="imageLayers">
        </ginkgo-map>

    通过属性的设置,就可以在地图上显示点、线、面等覆盖物,还可以进行轨迹回放、创建或修改点/线/面等覆盖物。

    安装

    已经做成node模块,直接用npm安装即可:

    npm install ginkgo-map

    使用

    index.html中引入API

    在index.html中引入高德地图的JS API:

    <script language="javascript" src="http://webapi.amap.com/maps?v=1.4.5&key=a6a80a41a8543e348e6497b1bd0e7821&plugin=AMap.Scale,AMap.MapType,AMap.ToolBar,AMap.Geocoder,AMap.PolyEditor,AMap.CircleEditor,AMap.RectangleEditor"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

    main.js中引入地图组件

    import GinkgoMap from 'ginkgo-map'
    Vue.use(GinkgoMap)

    Vue组件中使用

    直接用标签形式使用:

    <ginkgo-map ref="map" class="gingo-map" :gmapObj.sync="gmap" :options="mapOptions" :zoom.sync="zoom" :center.sync="center"></ginkgo-map>

    Demo

    源码:https://github.com/sharplog/ginkgo-map-demo
    在线演示:http://nsapp.applinzi.com/gmapdemo/

    组件源码

    https://github.com/sharplog/ginkgo-map

    展开全文
  • Vue整合百度地图插件

    2020-07-29 14:20:02
    真是项目的一小块案例,属于基础页面,包含Vue的基本用法,Vuex,element以及和 后台json交互
  • 很久前看到饿了么移动版的地址选择功能,除了文字检索poi功能外还有通过拖拽地图利用地图中心点检索周边的交互方式,正好后期工作的项目上有做类似的功能,顺便附上不久利用vue做出的高德地图及百度地图版本: ...
  • 官方文档地址: 点这里!!   ...在main.js中initAMapApiLoader中写入:AMap....所以插件中使用的依然是AMap,与导入名无关 不然会报错,Geocoder无法使用。 定位文档 照着文档写就行 注意在main.js中注...
  • vue插件大全汇总,你要的都这里,赶紧收藏下!

    万次阅读 多人点赞 2019-04-30 09:33:53
    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作和学习。很全的vue插件汇总,赶紧收藏下吧! 一、UI组件及框架 ...
  • Vue框架中添加百度地图组件

    千次阅读 2017-11-26 15:38:29
    Vue
  • vue 高德地图获取当前位置

    千次阅读 2019-10-22 17:16:14
    vue 高德地图获取当前位置1.引入高德地图2.添加定位插件 1.引入高德地图 上一篇博客中已经详细讲解了如何在vue项目中引入高德地图,因此不再赘述。 2.添加定位插件 在引入高德地图的基础上,添加定位插件。如下...
  • vue-baidu-map--------vue百度地图插件

    千次阅读 2018-08-21 16:27:56
    npm i --save vue-baidu-map 引入 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */ ak: 'YOUR_APP_KEY' }...
  • VUE常用插件库总结

    万次阅读 2020-09-03 00:12:15
    一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ... vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...
  • vue 插件集合

    万次阅读 多人点赞 2017-10-11 19:01:26
    Vue2.0+组件库总结   鲁大师666 关注 2017.05.05 10:46 字数 3121 阅读 5583评论 1喜欢 28 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint...
  • 这里注意百度地图开发者平台申请的密钥ak不要错误, 要用浏览器ak 详见百度开发者开放平台 import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'YOUR_APP_KEY' }) ...
  • vue相关UI组件库及实用案例

    万次阅读 2020-10-13 09:28:06
    element - 饿了么出品的Vue2的web UI工具套件 vant - vue的移动ui组件 vant-weapp - vue的微信小程序组件 iview - vue webUI组件(适用pc端和后台系统界面开发 ) iview weapp - vue的微信小程序组件 Vux -...
  • 本文是讲一个基于 Vue 的仿美团城市选择器的插件开发实例,目前关于城市选择器的插件比较少,在自己做项目的时候一直没有找到合适的城市选择器插件,所以自己开发了一个。同时也想把这个插件分享给出来,供同样有所...
  • 最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址 一.插件的安装 1.npm 安装 $ npm install vue-baidu-map --save 2.js 引入 index.html 中 <script ...
  • Vue相关开源项目库汇总(史上最全)

    万次阅读 2017-10-13 10:21:40
    目录 ...element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★
  • Vue开源项目汇总(史上最全)

    万次阅读 多人点赞 2019-01-09 08:42:05
    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ...element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuej...
1 2 3 4 5 ... 20
收藏数 3,558
精华内容 1,423
关键字:

vue地图插件