精华内容
下载资源
问答
  • Vue使用高德地图

    2019-03-21 14:15:25
    Vue使用高德地图有两种方式 1。直接引入 2。利用组件vue-amap 直接引入 1.先注册账号获取key 2.引入链接: <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=XXX">&...

    Vue使用高德地图有两种方式
    1。直接引入
    2。利用组件vue-amap

    直接引入
    1.先注册账号获取key
    2.引入链接:

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=XXX"></script>
    

    3.在webpack.base.conf.js加上

    externals: {
        'AMap': 'AMap'
      }
    

    4.在需要的Vue页面使用

    <template>
     <div id="container" style="width:500px; height:300px"></div>
    </template>
    <script>
    import AMap from 'AMap'
    export default {
        mounted(){
       	 	this.get()
        },
         methods: {
        	get(){
        	  var map = new AMap.Map('container', {
        	        resizeEnable: true,
        	        zoom: 13
        	    });
        	    var markers = [{
        	        position: [126.205467, 39.907761]
        	    },  {
        	        position: [116.305467, 39.807761]
        	    }];
        	    markers.forEach(function(marker) {
        	        new AMap.Marker({
        	            map: map,
        	            position: [marker.position[0], marker.position[1]]
        	        });   //设置点标记
        	    });
        		map.setFitView();   //所有点标记都显示在页面中
        	}
        }
    }
    </script>
    
    展开全文
  • vue使用高德地图

    2021-04-20 09:49:27
    高德地图使用准备 开发之前的准备 需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页端, 小程序端等 原生 index....

    vue-amap官网
    vue-ampa中文文档看着更爽
    如果定制化开发需求不太高的话,可以用vue-amap,

    vue-amap中好像没有这方面的配置,
    而且还有一些其他的定制化开发需求,
    然后就只用原生的高德。

    高德地图使用准备 开发之前的准备

    需要注册账号, 创建应用, 创建 api key

    调用地图的时候, 请求上带的 key 像高德地图服务器校验权限,
    另外可以用来标识同一个程序的不同入口, 如网页端, 小程序端等

    原生

    index.html 引入

    插件如果没有可以直接添加在
     
    代码粘贴到项目中index.html文件中,
    并且把代码中“申请的key值”改为在高德开放平台申请的key值;
     <script type="text/javascript" 
     src="https://webapi.amap.com/maps?v=1.4.15&key=申请的
     key值&&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    
    

    都可以尝试

    vue-cli2
    webpack.base.conf.js
    externals: {
      'AMap': 'AMap'
    },
    vue-cli3
    module.exports = {
      configureWebpack: {
        externals: {
          'AMap': 'AMap',
          'AMapUI': 'AMapUI'
           }
      }
    };
    
    eslintrc.js 配置
      globals: {
        AMap: true
      },
    
    eslint报错
      globals: {
        AMap: true
      },
    
    引入高德地图的页面
    <template>
      <div class="hello">
        <div style="height:500px" id="container" tabindex="0"></div>
      </div>
    </template>
    
    
    <template>
      <div id="Sharingrouter">
        <div id="container" ref="container"></div>
        <div id="panel"></div>
      </div>
    </template>
    <script>
    var map;
    export default {
      data() {
        return {
          aMap: null,
          infoWindow: null,
          nearbyType: "综合医院|卫生院|公安警察",
          userInfo: {
            studentName: "李逍遥",
            electric: "100%",
            signal: "6G",
            isOpenName: "在线",
            marchingState: "仙灵岛",
            isLine: "buzhidap",
            lastUpdateTime: "现在",
            remarks: "1",
            jd: 116.397428,
            wd: 39.90923
          },
          jd: 116.397428,
          wd: 39.90923,
          //医院,警察图标
          police: null,
          hospital: null,
          oldLine:null,//轨迹
          //历史轨迹数据
          list:[
            {
            P: 28.16939943249758,
    Q: 113.05324226683365
            },
            {
            P: 28.16939943249758,
    Q: 113.05324226683365
            },
            {
           P: 28.16939943249758,
    Q: 113.05324226683365
            },
            {
              P: 28.16939943249758,
    Q: 113.05324226683365
            }
          ]
        };
      },
      mounted() {
        this.init();
        this.placeSearch();
      },
      computed: {},
      created() {
        //点击标记后的弹出框
        this.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -40)
        });
      },
      methods: {
        init() {
          this.aMap = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 12 //地图显示的缩放级别
          });
          // 初始化警察定位图标
          this.police = new AMap.Icon({
            size: new AMap.Size(35, 30), //图标大小
            image: require("../assets/img/police.png")
          });
          // 初始化医院定位图标
          this.hospital = new AMap.Icon({
            size: new AMap.Size(35, 30), //图标大小
            image: require("../assets/img/hospital.png")
          });
          this.addSvgMarker();
        },
        addSvgMarker(icon, userInfo) {
          console.log("放大:");
          this.aMap.setCenter([this.jd, this.wd]);
          this.aMap.setZoom();
    
          let _this = this;
          // 设置高德地图自定义UI组件
          AMapUI.loadUI(["overlay/SvgMarker"], SvgMarker => {
            //icon的取值请见  http://fontawesome.io/icons/
            if (!SvgMarker.supportSvg) {
              //当前环境并不支持SVG,此时SvgMarker会回退到父类,即SimpleMarker
              alert("当前环境不支持SVG");
            }
            //创建一个水滴状的shape
            let shape = new SvgMarker.Shape.WaterDrop({
              height: 25, //高度
              width: 25, //不指定,维持默认的宽高比
              fillColor: "#fff" //填充色
            });
            //利用该shape构建SvgMarker
            let svgMarker = new SvgMarker(shape, {
              zIndex: 120,
              map: this.aMap,
              //经纬度
              position: new AMap.LngLat(this.jd, this.wd),
              zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
              iconLabel: {
                innerHTML: `<div class="marker-layout ${
                  this.userInfo.remarks === "1"
                    ? "maker-layout-student"
                    : "maker-layout-back"
                }"> </div>`,
                style: {
                  color: "#fff"
                }
              }
            });
    
            this.addInfoWindow(svgMarker, userInfo);
          });
        },
        addInfoWindow(marker, userInfo) {
          // 设置marker 锚点的点击事件
          AMap.event.addListener(marker, "click", e => {
            this.infoWindow.close();
            let content = "";
            content = this.getStudentWindow(this.userInfo);
            this.infoWindow.setContent(content);
            // 锚点发生点击事件后 展开信息框
    
            let _this = this;
            console.log("点击事件添加测试");
            // 设置信息框 里面按钮点击事件,重点方法处
            this.infoWindow.open(this.aMap, marker.getPosition());
            // 必须在这里添加信息弹出框事件 如果在外面添加会导致,信息框里面按钮点击事件失效
            //obj 保存经纬度
            var obj = marker.getPosition();
            console.log(obj);
            window.addEventListener("click", e => {
              if (e.target.id == "navigation") {
               this.mapPolyline()
                this.aMap.clearInfoWindow();
              }
            });
            // let itemClick = e => {
    
            // };
            // // 确保第一次点击 marker 锚点的时候回展示信息框
            // // this.infoWindow.open(this.aMap, marker.getPosition());
            // AMap.event.addListener(marker, "click", itemClick);
          });
        },
        //构建自定义信息窗体
        getStudentWindow(userInfo) {
          return `<div">
        <div style="padding:7px 0px 0px 0px;">
          <p class="input-item">学生姓名:${
            userInfo.studentName ? userInfo.studentName : ""
          }</p>
          <p class="input-item">电池电量:${userInfo.electric}%</p>
          <p class="input-item">信号:${userInfo.signal}</p>
          <p class="input-item">卡状态:${
            userInfo.isOpenName ? userInfo.studentName : "暂无"
          }</p>
          <p class="input-item">定位状态:${userInfo.marchingState}</p>
          <p class="input-item">设备状态:${userInfo.isLine}</p>
          <p class="input-item">更新时间:${userInfo.lastUpdateTime}</p>
          <p id="navigation" style="color:#267cfb">历史轨迹</p>
        </div>
      </div>`;
        },
        // 搜索周边
        // 搜索周边
        placeSearch(userInfo) {
          let MSearch;
          this.aMap.plugin(
            ["AMap.PlaceSearch", "AMap.Geocoder", "AMap.ToolBar", "AMap.Scale"],
            () => {
              this.aMap.addControl(new AMap.ToolBar());
              this.aMap.addControl(new AMap.Scale());
    
              let geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
                // city: "010"
                radius: 1000 //范围,默认:500
              });
              // 根据经纬度 获取当前点击位置的城市code 用于周边搜索
              geocoder.getAddress(
                //根据当前的经纬度查找
                [this.userInfo.jd, this.userInfo.wd],
                (status, result) => {
                  if (status === "complete" && result.info === "OK") {
                    // result为对应的地理位置详细信息
                    if (this.nearbyMarker && this.nearbyMarker.length > 0) {
                      this.nearbyMarker.forEach(element => {
                        // 每次切换学生的时候清空周边所有 医院和公安局锚点
                        element.setMap(null);
                      });
                    }
                    MSearch = new AMap.PlaceSearch({
                      pageSize: 20, // 单页显示结果条数
                      //构造地点查询类
                      city: result.regeocode.addressComponent.citycode //城市
                    });
                    AMap.event.addListener(
                      MSearch,
                      "complete",
                      this.keywordSearch_CallBack
                    ); //返回地点查询结果
                    // 设置搜索条件
                    MSearch.searchNearBy(
                      // "综合医院|卫生院|公安警察",
                      this.nearbyType ,
                      // 设置搜索中心店
                      [this.userInfo.jd, this.userInfo.wd],
                      // 设置中心店搜索半径
                      2000
                    );
                  }
                }
              );
            }
          );
        },
        //结果的回调
        keywordSearch_CallBack(data) {
          console.log(data);
          var poiArr = data.poiList.pois;
          var resultCount = poiArr.length;
          this.poiArr = poiArr; //左边要渲染的数据
          // 遍历搜索周边数据
          poiArr.forEach((element, index) => {
            // 添加锚点
            this.addmarker(index, element);
          });
          console.log("第二处");
          this.aMap.setFitView();
        },
        //添加marker&infowindow
        addmarker(i, d) {
          var lngX = d.location.getLng();
          var latY = d.location.getLat();
          var markerOption = {
            map: this.aMap,
            position: new AMap.LngLat(lngX, latY), // 设置marker
            // 根据类型判断显示的图片
            icon:
              d.type.indexOf("政府机构及社会团体;") >= 0 ||
              d.type.indexOf("公安警察") >= 0 ||
              d.name.indexOf("警察") >= 0 ||
              d.name.indexOf("公安") >= 0
                ? this.police
                : this.hospital
          };
          // 设置marker坐标点
          var mar = new AMap.Marker(markerOption);
          // 记录所有 选择人后出现的医院和公安局锚点
          // this.nearbyMarker.push(mar);
          // 信息窗体设置
          var infoWindow = new AMap.InfoWindow({
            content:
              "<p class='nearby-item'>" +
              d.name +
              "</p>" +
              this.TipContents(d.name, d.address),
            //  + `</br><a  id="go"  href="javascript:;">立即前往</a>`,
            size: new AMap.Size(300, 0),
            autoMove: true,
            offset: new AMap.Pixel(0, -30)
          });
          // 弹出层界面处理
          // this.windowsArr.push(infoWindow);
          var _this = this;
          let winClick = e => {
            var obj = mar.getPosition();
            this.map = obj; //这里保存的地址经纬度
            this.address = d.name; //这里保存的是地址名字
            window.removeEventListener("click", _this.demo);
            infoWindow.open(_this.aMap, obj);
            window.addEventListener("click", _this.demo);
          };
          AMap.event.addListener(mar, "click", winClick);
        },
        TipContents(name, address) {
          //窗体内容
          if (
            name == "" ||
            name == "undefined" ||
            name == null ||
            name == " undefined" ||
            typeof name == "undefined"
          ) {
            type = "暂无";
          }
          if (
            address == "" ||
            address == "undefined" ||
            address == null ||
            address == " undefined" ||
            typeof address == "undefined"
          ) {
            address = "暂无";
          }
          var str = `地址:${address}`;
          return str;
        },
        demo(e) {
          if (e.target.id === `go`) {
            e.stopPropagation();
            this.saveAddress();
          }
        },
        saveAddress() {
          console.log("立即前往");
        },
        //轨迹绘制
        mapPolyline() {
          // 关闭高德信息框
          this.aMap.clearInfoWindow();
         let path = [
        new AMap.LngLat(116.368904,39.913423),
        new AMap.LngLat(116.382122,39.901176),
        new AMap.LngLat(116.387271,39.912501),
        new AMap.LngLat( 116.397428,
            39.90923)
    ];
    this.polyline = new AMap.Polyline({
        path: path,  
        borderWeight: 2, // 线条宽度,默认为 1
        strokeColor: 'red', // 线条颜色
        lineJoin: 'round' // 折线拐点连接处样式
    });
    this.aMap.add(this.polyline);
        },
      }
    };
    </script>
    
    <style  scoped>
    #container {
      width: 100%;
      height: 100%;
      position: absolute;
      cursor: pointer;
    }
    
    /deep/ .marker-layout {
      width: 36px;
      height: 40px;
    
      background-repeat: no-repeat;
      background-size: 100%;
    }
    /deep/ .maker-layout-student {
      width: 25px;
      height: 25px;
      background-image: url("../assets/img/student.png");
    }
    /deep/ .amap-icon {
    }
    /deep/ .amap-icon img {
      width: 30px;
      height: 30px;
    }
    </style>
    
    
    
    
    展开全文
  • Vue 使用高德地图

    2021-04-02 14:35:40
    文章目录效果如下准备步骤 效果如下 准备 步骤

    效果如下

    在这里插入图片描述


    准备


    步骤

    展开全文
  • 主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue使用高德地图点击下钻 上浮效果的实现思路,本文以浙江省为例通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
  • vue使用高德地图获取当前经纬度

    千次阅读 2020-04-02 17:35:22
    Vue使用高德地图获取当前经纬度 在utils里面新建getLocation.js 封装获取经纬度的公用方法(优化加载速度动态cdn引入高德地图) 由于高德Api方法获取当前经纬度比较慢,如果需求是在获取到当前经纬度数据之后请求一些...

    vue使用高德地图Api获取当前经纬度信息

    在utils里面新建getLocation.js 封装获取经纬度的公用方法(优化加载速度动态cdn引入高德地图) 由于高德Api方法获取当前经纬度比较慢,如果需求是在获取到当前经纬度数据之后请求一些数据,需要搭配promise使用保证获取到经纬度信息。具体见下面代码

    function loadSDK() {
      if (window.AMap) return
      return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src =
          'http://webapi.amap.com/maps?v=1.4.6&key=*****************' //***为申请的高德key
        document.head.appendChild(script)
        script.onload = resolve
        script.onerror = reject
      })
    }
    
    export default async () => {
      await loadSDK()
      return new Promise((resolve) => {
        // eslint-disable-next-line no-undef
        AMap.plugin('AMap.Geolocation', () => {
          // eslint-disable-next-line no-undef
          const geolocation = new AMap.Geolocation({ enableHighAccuracy: false })
          geolocation.getCurrentPosition((status, result) => {
            const res =
              status === 'complete'
                ? result.position
                : { lat: 39.909187, lng: 116.397451 } //默认北京 116.397451、39.909187
            console.log('定位结果', res)
            resolve(res)
          })
        })
      })
    }
    

    在vue页面中的使用(这里假设需求是请求离我最近店铺信息列表)

    <template>
      <div class="main-container">
        <div class="list">
    		<div class="list-item" v-for="(item,index) in list" :key="index">
    			//you can do something
    		</div>
    	</div>
      </div>
    </template>
    
    <script>
    import * as Api from '@/api/xxx.js' //引入请求接口的Api
    import getLocation from '@/utils/getLocation' //引入getLocation方法
    export default {
      data() {
        return {
          params: {},
          list: []
        }
      },
      mounted() {
        this.fetchList()
      },
      methods: {
        async getPosition() {
          const { lng, lat } = await getLocation()
          this.params = { lng, lat }
        },
        async fetchList() {
          await this.getPosition()
          const { list } = await Api.fetchList(this.params)
          this.list = list
        }
      }
    }
    </script>
    
    <style lang='less' scoped>
    </style>
    
    

    注意如果在index.html中引入高德地图在全局使用AMap构造函数需要在vue.config.js添加如下配置,否则会报‘AMap is not defined’错误

    module.exports = {
      configureWebpack: {
        externals: {
          AMap: 'AMap'
        }
      }
    }
    

    在页面中使用(举个🌰,代码未测试)

    <script>
    import AMap from 'AMap'
    export default{
      methods:{
        fn(){
    	  AMap.plugin('AMap.Geolocation', () => {
          const geolocation = new AMap.Geolocation({ enableHighAccuracy: false })
          geolocation.getCurrentPosition((status, result) => {
            const res =
              status === 'complete'
                ? result.position
                : { lat: 39.909187, lng: 116.397451 } //默认北京 116.397451、39.909187
            console.log('定位结果', res)
          })
        })
        }
      }
    }
    </script>
    
    展开全文
  • vue 使用高德地图插件 vue-amap

    千次阅读 2020-03-28 22:31:37
    vue 使用高德地图 vue-amap账号注册高德地图插件安装页面引入与组件配置创建全局组件AMapmain.js页面引入vue-amap以及globalComponents.js配置AMap为全局组件AMap页面实现插入链接与图片如何插入一段漂亮的代码片...
  • 这次项目需要用到地图API,我们来学习一下在Vue中调用高德地图的API介绍新建应用,输入信息新增Key填写随便填在项目中使用还是使用我们上一个项目,那个MintUI的,不是有一个附近的板块么,我们就用这个cd到项目目录...
  • 运行环境是vue-cli webpack引入高德地图一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是,在入口index.html的头部直接引入,记得一定要带上key,如果没有的话去高德地图api的官网申请一个。传送门如下:...
  • created 生命周期载入高德地图API载入的方式类似于 jquery 的脚本加载,我这里也是使用了别人封装好的一个加载方法,各位直接使用或者自己改created () {// 已载入高德地图API,则直接初始化地图if (window.AMap &...
  • 主要是想记录一下使用高德地图地位以及标记当前位置,搜索位置的过程。创建Vue项目的流程引入高德地图在index.html 的head中引入代码。复制代码设置容器,初始化地图。.container { // 容器大小 margin-left: 10%; ...
  • 这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先npm install -s vue-amap然后在 main.jsimport ...
  • 基本配置1:在vue项目中下载vue-amapnpm install vue-amap --save文档连接2: 在main.js引入高德地图import VueAMap from 'vue-amap';//注册高德Vue.use(VueAMap);VueAMap.initAMapApiLoader({key: '****',//这里是你...
  • vue使用高德地图信息窗体里面的给点击事件 vue-amap中自定义窗体添加点击事件 最近做vue项目时候用到了vue-amap,但是在自定义窗体的时候碰到了问题,里面的点击事件怎么都不生效,看了官方文档说的是 template 模板...
  • vue使用高德地图el-amap-polygon(多边形)报错 AMap.PolyEditor is not a constructor 1.npm的确导入过vue-amap 2.初始化过 import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({...
  • vue使用高德地图组件

    千次阅读 2019-05-25 20:55:08
    引入使用和配置(记得先去申请一个高德地图的账号) import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: '3b576d3486dc84adc303919ebc399dba', plugin: ['AMap.Aut...
  • vue使用高德地图过程

    2019-02-19 16:13:59
    高德地图API官方文档 http://lbs.amap.com/api/javascript-api/guide/abc/prepare 配置项 1、引入高德JS API 脚本 &amp;amp;amp;amp;lt;script type=&amp;amp;amp;quot;text/javascript&amp;amp;amp;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 860
精华内容 344
关键字:

vue使用高德地图

vue 订阅