zoukankan      html  css  js  c++  java
  • vue 项目中引入 高德地图

    第一步 : 现在高德地图的官网上申请key

    第二部 : 在index.html中引入

     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=your key"></script>
     第三步 : 新建一个map.js
    /**
     * 高德地图定位
     * @type {{}}
     */
    export const location = {
        initMap (id) {
          let mapObj = new AMap.Map(id, {})
          let geolocation;
          mapObj.plugin(['AMap.Geolocation'], function () {
              geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, //  是否使用高精度定位,默认:true
              timeout: 10000, //  超过10秒后停止定位,默认:无穷大
              maximumAge: 0, // 定位结果缓存0毫秒,默认:0
              convert: true, // 自动偏移坐标,偏移后的坐标为高德坐标,默认:true
              showButton: true, //  显示定位按钮,默认:true
              buttonPosition: 'LB', // 定位按钮停靠位置,默认:'LB',左下角
              buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
              showMarker: true, //  定位成功后在定位到的位置显示点标记,默认:true
              showCircle: true, //  定位成功后用圆圈表示定位精度范围,默认:true
              panToLocation: true, //  定位成功后将定位到的位置作为地图中心点,默认:true
              zoomToAccuracy: true//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
            })
            mapObj.addControl(geolocation)
            geolocation.getCurrentPosition()
          })
          return geolocation 
        }
      }
    第四步:在你需要获取位置信息的页面(home.vue)
    import {location } from 'map.js'
    methods :{

    refreshBtn(){
    let _that = this;
    let geolocation = location.initMap("map-container"); //定位
    AMap.event.addListener(geolocation, "complete", result => {
    let data = {
    "user_id": "systemId", //赋值systemId,必须
    "eventTypeId": api.global.eventTypeId,
    "longitude": result.position.lng, //类型:Number 必有字段 备注:经度
    "latitude": result.position.lat
    }
    api.queryRecentProject(data).then(res=> {
    if(res.data.Result == 'success'){
    _that.projectName = res.data.Item.project_local_name
    }
    })
    });

    },
    }

     
  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    TiFlash:并非另一个 T + 1 列存数据库
    单图说TDSQL;OceanBase 2.2 事务引擎核心功能;穿云箭2.0版发布;RMAN DUPLICATE配置19C DG;外键上有无索引的影响;MySQL8.0 索引新功能;GaussDB C
    tcpdump 看到 报文长度超过MSS
    TCP 最大段大小(Max Segment Size,MSS) 最大段大小
    Hack The Box——Traceback
    如何设置don't fragment (DF) flag 在socket上? (实际模拟路径 MTU 发现)
    MTU=1500 1460数据为什么要发2次?
    MTU=1500,单个报文段最大值为1448
    MTU 1500 发送1448数据
  • 原文地址:https://www.cnblogs.com/xiebeibei/p/12325052.html
Copyright © 2011-2022 走看看