精华内容
下载资源
问答
  • Geolocation 高德地图的一个依赖配置 定位插件 Geocoder 高德地图的一个依赖配置 地图实例插件 获取点击的地方的经纬度和具体地址

    npm 安装
    推荐 npm 安装。

    npm install vue-amap --save
    
    import VueAMap from 'vue-amap';
    
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
      key: 'your amap key',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4'
    });
    

    后面按照文档调用就好

    <!-- 地图 -->
            <div class="dt">
                <div class="amap-page-container">
                    <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :zoom="zoom" :events="events">
                    <!-- 点击显示标记 -->
                        <el-amap-marker v-for="(marker, index) in markers" :key="marker.index" :position="marker.position" :icon="marker.icon" :title="marker.title" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
                        <!-- 显示的圆覆盖圈 -->
                        <el-amap-circle v-for="circle in circles" :key="circle.index"  fillColor='#dae6f0' strokeOpacity='0' strokeColor='#000' :center="circle.center" :radius="circle.radius" :fill-opacity="circle.fillOpacity" :events="circle.events"></el-amap-circle>
                    </el-amap>
    
                    <!-- <div class="toolbar">
                        position: [{{ lng }}, {{ lat }}] address: {{ address }}
                    </div> -->
                </div>
            </div>
    

    vue里data return的数据

     // 地图插件
                    qaqqq:[],
                    address: '',
                    // 地图缩放
                    zoom:14,
                    // 初始中心
                    center: [114.406539, 30.492921],
                    lng: 0,
                    lat: 0,
                    loaded: false,
                    // 点击显示的标记默认的定位
                    markers: [{
                            position:[114.406539, 30.492921]
                        }], 
    
                    // 圆覆盖圈
                    circles: [
                        {
                        center: [114.406539, 30.492921],
                        radius: 100,
                        fillOpacity: 0.5,
                        events: {
                            click: () => {
                            // alert('click');
                            }
                        }
                        }
                    ],
                    //  定位 
                    plugin: [{
                        pName: 'Geolocation',
                        events: {
                        click(e){
                            // alert(1)
                        },
                        init(o) {
                        
                            // o 是高德地图定位插件实例
                            o.getCurrentPosition((status, result) => {
                            if (result && result.position) {
                                self.lng = result.position.lng;
                                self.lat = result.position.lat;
    
                                // 初始定位地图中心位置
                                self.center = [self.lng, self.lat];
                                // 初始定位圆的位置
                                self.circles[0].center = [self.lng, self.lat]
                                // 初始定位标记的位置
                                self.markers[0].position = [self.lng, self.lat]
    
                                console.log(self.circles[0].center)
                                console.log(self.center)
                                self.loaded = true;
                                
                                // 这里通过高德 SDK 完成。
                                var geocoder = new AMap.Geocoder({
                                    radius: 1000,
                                    extensions: "all"
                                });   
                                    geocoder.getAddress([self.lng ,self.lat], function(status, result) {
                                    if (status === 'complete' && result.info === 'OK') {
                                    if (result && result.regeocode) {
                                        self.address = result.regeocode.formattedAddress;
                                        self.$nextTick();
                                    }
                                    }
                                }); 
            
                                self.$nextTick();
                            }
                            });
                        }
                        }
                    }],
                    // 点击显示标记
                    events: {
                        click(e) {
                        // alert(1)
                            console.log(e)
                        let { lng, lat } = e.lnglat;
                        self.lng = lng;
                        self.lat = lat;
    
                        // 点击显示标记后显示圆的覆盖圈
                        self.$nextTick(()=>{
                                console.log(self.circles[0].center)
                                self.circles[0].center.shift()
                                self.circles[0].center.pop()
                                self.circles[0].center.push(self.lng)
                                self.circles[0].center.push(self.lat)
                                // self.circles[0].center[0] = self.lng
                                // self.circles[0].center[1] = self.lat
                                console.log(self.circles[0].center)
                                self.qaqqq.push('a')
                        });
                        
    
                        self.markers = [{
                                    position: [self.lng, self.lat],
                                    icon: '',
                                    title: '',
                                    events: {
                                        click(o) {
                                            // console.log(o)
                                        }
                                    }
                                }];
    
                        // 这里通过高德 SDK 完成。
                        var geocoder = new AMap.Geocoder({
                            radius: 1000,
                            extensions: "all"
                        });        
                        geocoder.getAddress([lng ,lat], function(status, result) {
                            if (status === 'complete' && result.info === 'OK') {
                            if (result && result.regeocode) {
                                self.address = result.regeocode.formattedAddress;
                                self.$nextTick();
                            }
                            }
                        });        
                        }
                    },
    

    在这里插入图片描述

    Geolocation

    高德地图的一个依赖配置 定位插件

    在这里插入图片描述

    Geocoder

    高德地图的一个依赖配置 地图实例插件 获取点击的地方的经纬度和具体地址

    展开全文
  • vue项目使用高德地图定位当前地址

    千次阅读 2020-07-08 20:33:10
    vue项目使用高德地图定位当前地址一、在项目中安装vue-amap插件二、页面代码三、data数据 一、在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vue-amap --save 3.在main.js中引入 import ...

    vue项目使用高德地图定位当前地址

    一、在项目中安装vue-amap插件

    • 1.最终效果
      在这里插入图片描述
    • 2.安装命令
    npm install vue-amap --save
    
    • 3.在main.js中引入
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap)
    VueAMap.initAMapApiLoader({
      key: 'dd4cc5f831b67cde767de9a65f983650',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
      // 默认高德 sdk 版本为 1.4.4
      v: '1.4.4'
    })
    

    plugin字段表示插件引入,可以根据自己需求引入,但是想做当前定位,必须引入'AMap.Geolocation'

    二、页面代码

    <!-- 地图容器 -->
       <div id="map_container">
      <!-- 地图 -->
        <el-amap
            :center="center"
            :zoom="zoom"
            class="amap_demo"
            :plugin="plugin">
            <!-- 地图标记 -->
            <el-amap-marker v-for="(marker,index) in markers" :position="marker.position" :key="index"></el-amap-marker>
        </el-amap>
    </div>
    
    • 1.amap_demo必须有高度:以下是css代码
    #map_container{
          width: 100%;
          height: 210px;
    }
    .amap_demo{
           width: 100%;
           height: 100%;
     }
    

    三、data数据

    一看这么多不要害怕,很简单,实在不行cv就行

    			zoom: 12,
                // 默认中心点
                center: [116.40,39.90],
                // 标记点
                markers: [
                    // 标记点位置
                    { position: [116.40,39.90]}
                ],
                // 当前地图的插件
                plugin: [{
                  enableHighAccuracy: true,//是否使用高精度定位,默认:true
                  timeout: 10000,          //超过10秒后停止定位,默认:无穷大
                  maximumAge: 0,           //定位结果缓存0毫秒,默认:0
                  convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
                  showButton: true,        //显示定位按钮,默认:true
                  buttonPosition: 'RB',    //定位按钮停靠位置,默认:'LB',左下角
                  showMarker: false,        //定位成功后在定位到的位置显示点标记,默认:true
                  showCircle: true,        //定位成功后用圆圈表示定位精度范围,默认:true
                  panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
                  zoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:f
                  extensions:'all',
                  pName: 'Geolocation',
                  events: {
                    init(o) {
                      // o 是高德地图定位插件实例
                      o.getCurrentPosition((status, result) => {
                        console.log(result)
                        if (result && result.position) {
                            // 将当前经纬度给中心点
                            that.center = [result.position.lng, result.position.lat];
                            // 将当前经纬度给标记点
                            that.markers[0].position = that.center;
                            that.loaded = true;
                            that.$nextTick();
                        }
                      });
                    }
                  }
                }],
    

    在这里插入图片描述
    打印信息
    在这里插入图片描述

    展开全文
  • js-vue-高德-实时定位.zip vue集成高德地图,实时定位用户当前位置经纬度,并在高德地图上显示具体位置 方法简便,丢入即可使用 vue集成高德地图,实时获取用户的位置经纬度,并在地图显示具体位置
  • 主要介绍了vue中实现高德定位功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 使用高德拖拽定位

    千次阅读 2019-07-16 18:11:46
    引入高德,一定要在头部引入,因为高德需要预加载 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=010bac8f887bf63ff0d0d5c71b29e4bb"></script> <!--...

     

     

    index.html

    引入高德,一定要在头部引入,因为高德需要预加载

      <!--引入高德地图JSAPI -->
      <script src="//webapi.amap.com/maps?v=1.4.13&key=010bac8f887bf63ff0d0d5c71b29e4bb"></script>
      <!--引入UI组件库(1.0版本) -->
      <script src="//webapi.amap.com/ui/1.0/main.js"></script>

    在build/webpack.base.conf.js文件中找到module.exports在对象里加入

     externals: {
        'AMap': 'AMap',
        'AMapUI': 'AMapUI'
      }

    页面使用:

    <template>
      <div class="amap-wrapper">
        <div id="container"></div>
      </div>
    </template>
    
    <script>
    import Amap from "AMap";
    export default {
      data() {
        var self = this;
        return {
        };
      },
      methods: {
        positionPicker() { //拖拽地址
          let that = this;
          AMapUI.loadUI(["misc/PositionPicker"], function(PositionPicker) {
            var map = new AMap.Map("container", {
              zoom: 16,
              scrollWheel: false
            });
            var positionPicker = new PositionPicker({
              mode: "dragMap",
              map: map
            });
            positionPicker.on("success", function(positionResult) {
              console.log(positionResult);
              let cityinfo = positionResult.address;
              cityinfo = cityinfo.substring(
                cityinfo.indexOf("省") + 1,
                cityinfo.indexOf("市") + 1
              );
              console.log(cityinfo);
              that.$store.dispatch("location/setlocation", cityinfo);
              that.$store.dispatch("location/setAddress", positionResult.address);
            });
            positionPicker.on("fail", function(positionResult) {
              console.log(`定位失败:` + positionResult);
            });
            positionPicker.start();
            map.panBy(0, 1);
          });
        }
      },
      mounted() {
        this.positionPicker();
      }
    };
    </script>
    <style lang="less" scoped>
    // 地图
    #container {
      width: 500px;
      height: 500px;
    }
    </style>
    

     

    展开全文
  • vue高德地图JSAPI

    2020-05-28 11:01:03
    vue 高德地图JSAPI 使用vue-amap 使用npm 安装vue-amap (https://elemefe.github.io/vue-amap/#/) npm install vue-amap --save 在main.js中引入vue-amap import VueAMap from 'vue-amap' Vue.use(VueAMap) ...

    vue 高德地图JSAPI

    使用vue-amap
    使用npm 安装vue-amap (https://elemefe.github.io/vue-amap/#/)

    npm install vue-amap --save
    

    在main.js中引入vue-amap

    import VueAMap from 'vue-amap'
    Vue.use(VueAMap)
    
    VueAMap.initAMapApiLoader({
      key: '高德地图申请的key',
      plugin: [//高德地图扩展插件(按需添加)
        'AMap.Autocomplete', // 输入提示插件
        'AMap.PlaceSearch', // POI搜索插件
        'AMap.Scale', // 右下角缩略图插件 比例尺
        'AMap.OverView', // 地图鹰眼插件
        'AMap.ToolBar', // 地图工具条
        'AMap.MapType', // 类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
        'AMap.PolyEditor', // 编辑 折线多,边形
        'AMap.CircleEditor', // 圆形编辑器插件
        'AMap.Geolocation' // 定位控件,用来获取和展示用户主机所在的经纬度位置
      ],
      uiVersion: '1.1', // ui库版本,不配置不加载,
      v: '2.0'
    })
    

    只需要vue-amap提供的功能请参照https://elemefe.github.io/vue-amap/#/

    使用高德官网JSAPI
    安装vue-amap,步骤同上
    在需要使用高德地图的页面引入lazyAMapApiLoaderInstance,详细功能参考https://lbs.amap.com/

    img

    展开全文
  • vue 高德地图

    2019-08-28 17:57:32
    1.去高德开发者平台申请key; 2.安装vue-amap; 3.使用组件调用地图 一.npm安装vue-amap npm install vue-amap --save 二.在项目main.js引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始...
  • 我们需要到高德开放平台生成key 我这里选的是web端,提交后会生成一个key值 2.安装vue-amap npm install vue-amap --save 在项目main.js引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始化...
  • vue 开发vue-ampap高德地图定位

    千次阅读 2019-06-04 16:25:00
    仓库地址:https://download.csdn.net/download/qq_40190624/11225746 安装:npm install vue-amap --save main.js引入 // The Vue build version to load with the `import` command // (runtime-only or ...
  • vue调用高德地图实现定位

    千次阅读 2020-05-27 19:35:32
    vue调用高德地图实现定位 第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap A...
  • vue中的高德定位

    2019-12-01 14:58:56
    首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></...
  • vue h5高德地图定位自定义icon

    千次阅读 2019-06-13 14:26:09
    // o 是高德地图定位插件实例 o.getCurrentPosition((status, result) => { if(status == 'error'){ console.log('定位失败') } console.log(status, result) if (result && result.position) { self....
  • vue 中加入高德定位和轨迹

    千次阅读 2019-05-27 17:55:29
    参考:https://elemefe.github.io/vue-amap/#/zh-cn/coverings/text ... 1、在vue 项目中的 main.js 中加入 import VueAMap from 'vue-a...
  • vue-amap高德地图定位以及文本标注 因要求需实现在地图的定位以及该定位的文本标注,所有我看了一下实现的方式有哪些。最后选择了用现成的 vue-amap高德组件 去实现。 实现效果如图: 实现过程很简单: 1.到 高德...
  • vue-amap定位位置定监听点击高德插件定位事件 初始化只需要调用 initAMapApiLoader 方法引入插件 再次点击定位按钮,可以监听到事件触发
  • 主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • https://blog.csdn.net/yp090416/article/details/74900870?ref=myrecommend
  • 1.vue中使用高德地图定位

    万次阅读 热门讨论 2019-05-03 10:41:03
    记录在vue项目中使用高德地图js API的过程 首先注册账号申请key 项目中引入api 在开发文档中的“准备”目录中复制api,引入vue项目的index.html中,替换key 项目主要使用的是定位服务,在菜单中找到定位的api写到...
  • vue 高德地图获取当前位置

    千次阅读 2019-07-09 19:57:47
    vue 高德地图获取当前位置1.引入高德地图2.添加定位插件 1.引入高德地图 上一篇博客中已经详细讲解了如何在vue项目中引入高德地图,因此不再赘述。 2.添加定位插件 在引入高德地图的基础上,添加定位插件。如下...
  • vue引入高德地图实现简单的定位 1.在高德地图的开放平台去注册key 网址:https://lbs.amap.com/ 开发|高德地图API 创建后,点击添加,创建自己的key 在这里选择Web端(JS API) 开始引入地图 在全局public下的index.HTML...
  • vue 高德地图的使用

    2021-02-03 15:51:39
    1、在index.html中引入 ... <...key=key"></script> 2、在要使用的vue 文件中 html 代码 <template> <div id="container"></div> </template> css 代码 <
  • 先在vue.config.js中配置 module.exports = { lintOnSave: false, configureWebpack: { externals: { AMap: "AMap", }, }, } <template> <div> <el-input v-model="lnglat"> <el-...
  • 前提假设你已经申请好了 高德api及对应的高德api业务,申请高德api配置相关步骤不在这里敷述,自行百度相关博文配置; build/webpack.base.conf.js要配置 const webpackConfig = { // ..... externals: { 'A...
  • vue 高德地图(1)

    2020-09-12 17:47:29
    vue-amap npm install vue-amap main.js import VueAMap from 'vue-amap' ...// 高德地图 VueAMap.initAMapApiLoader({ key: '密钥', plugin: [ 'AMap.Scale', 'AMap.Icon', 'AMap.Marker', 'AMap.C
  • vue高德地图点击放大Maker

    千次阅读 2018-07-24 20:51:44
    需要自行引入高德地图,参考https://elemefe.github.io/vue-amap/#/。本案例实现点击高德地图上的marker并放大该markder的图标。当点击另外的markder时,当前marker恢复原来的大小 效果图:   &lt;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,633
精华内容 653
关键字:

vue高德地址定位

vue 订阅