精华内容
下载资源
问答
  • 高德地图定位
    千次阅读
    2021-06-13 04:17:57

    1. 申请开发者 KEY

    使用前,请您先申请开发者 Key,这里您可以和 JS-API 共用同一个开发者 Key。

    2. 引入 JS-API,其中开发者 key 和版本号 v 必填

    3. 创建地图实例

    在使用地图前,我们需要创建一个容器用于显示地图底图,这一步和 JS-API 一样,通过 AMap.Map创建。

    var map = new AMap.Map("mapCon", {

    resizeEnable: true, //是否监控地图容器尺寸变化

    zoom:12//级别

    });

    4. 代码实例

    JS使用高德地图定位

    (function(doc, win) {

    var docEl = doc.documentElement,

    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",

    recalc = function() {

    if (docEl.clientWidth > 750) {

    docEl.style.fontSize = "100px";

    doc.getElementById("app").style.width = "750px";

    } else {

    var width = docEl.clientWidth / 7.5;

    docEl.style.fontSize = width + "px";

    doc.getElementById("app").style.width = "auto";

    }

    };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener("DOMContentLoaded", recalc, false);

    })(document, window);

    *{margin: 0;padding: 0;box-sizing: border-box;}

    body{font-size: 0.28rem;}

    #mapCon{width: 7rem;height: 6rem;margin: 0.2rem auto;border: 1px solid #dedede;}

    当前地址:

    $(function () {

    var map = new AMap.Map("mapCon", {

    resizeEnable: true, //是否监控地图容器尺寸变化

    zoom:12//级别

    });

    var setPosition = function (callback) {

    map.plugin('AMap.Geolocation', function () {

    var 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

    });

    map.addControl(geolocation);

    console.log(geolocation)

    geolocation.getCurrentPosition(function (status, result) {

    if(status == 'complete'){//定位成功

    if(typeof callback == 'function'){

    callback(result);

    }

    }

    if(status == 'error'){//定位失败

    if(result.info == 'NOT_SUPPORTED'){

    alert("当前浏览器不支持定位功能");

    return false;

    }

    if(result.info == 'FAILED'){

    var msg = result.message;

    if(msg.indexOf('Get ipLocation failed') != -1){

    alert("IP精确定位失败");

    return false;

    }

    if(msg.indexOf('sdk定位失败') != -1){

    alert("请检查sdk的key是否设置好,以及webview的定位权限及应用和系统的定位权限是否开启");

    return false;

    }

    if(msg.indexOf('Browser not Support html5 geolocation') != -1){

    alert("浏览器不支持原生定位接口");

    return false;

    }

    if(msg.indexOf('Geolocation permission denied') != -1){

    alert("用户禁用了定位权限");

    return false;

    }

    if(msg.indexOf('Get geolocation time out') != -1){

    alert("浏览器定位超时");

    return false;

    }

    if(msg.indexOf('Get geolocation failed') != -1){

    alert("定位失败");

    return false;

    }

    }

    }

    });

    });

    };

    //地图加载成功后调用定位

    map.on("complete", function(){

    setPosition(function (res) {

    var position = res.position;

    var address = res.addressComponent;

    var addr = address.province + address.city + address.district + address.township + address.street + address.streetNumber;

    var lat = position.lat;

    var lng = position.lng;

    $(".addr").html(addr);

    });

    });

    //地图加载失败

    map.on("error", function(){

    alert("地图加载失败,请重新进入页面或刷新当前页面重试");

    });

    });

    更多相关内容
  • 将js引用地址中的key替换,如果是PC端,请允许浏览器定位
  • JS基于高德地图定位城市闪烁特效是一款基于高德api地图的点位闪烁效果,利用canvas自定义图层实现闪烁效果。
  • 二:下载定位SDK,下载下来有地图SDK和定位SDK,然后导入项目,导入再Add As Library,so文件按自己需求来 下载地址:http://lbs.amap.com/api/android-location-sdk/download/ 三:在AndroidManifest.
  • 高德地图定位

    2019-08-09 11:35:54
    高德地图api,根据GPS或IP定位当前位置,在地图上标记,加载实时路况等。
  • C#实现高德地图定位(包含登录,注册) 推荐:比较实用
  • flutter + SpringBoot + MySql 实现高德地图定位获取位置信息插入数据库并计算出经纬度之间的距离
  • 纠正高德地图定位位置偏差案例,只需要自己在高德开发中心申请的key替换到我的key,一运行就会弹出alert(经纬度)
  • 高德地图 定位 划线 导航
  • 在清单文件里面请自行到高德地图官网申请key进行替换,本demo是使用2D官方jar包,需要3D功能的可以自行到官方下载,demo比较简单注释非常详细,适合刚学习高德地图定位的朋友。
  • 这里我使用高德地图定位当前位置并显示地址和经纬度。 github代码传送门 先上效果图: 实现步骤: 1. 创建应用获取key: 接入第三方无一例外,去高德地图官网注册账号并创建应用。填入包名和keystore的Sha1。 ...
  • 1、高德地图定位 2、滑动地图可以改变我的位置 3、仿微信中位置 4、基于http://download.csdn.net/detail/power_tx/6506305优化
  • // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else ...
  • 本文实例为大家分享了Android实现高德地图显示及定位的具体代码,供大家参考,具体内容如下 先看看效果 1、要实现高德地图定位,首先要下载高德地图的SDK  下载地址 然后在高德地图官网上登录你注册的账号并且去...
  • 高德地图定位SDK

    2016-06-05 16:12:56
    高德地图定位SDK
  • Kotlin开发高德地图,仿微信 发送位置功能源码,高德定位、地图、搜索SDK、动画、添加标记的使用
  • 高德地图定位demo

    2017-10-17 12:14:17
    1,先去高德地图API官网获取一个web浏览器的key 2,修改myLocate.js第22行的key值 3,使用pc浏览器的响应式访问可能有问题,用Hbuilder或者花生壳发布出去用手机访问即可获取当前位置信息 4,获取其他信息可以参考...
  • 高德地图定位+围栏

    2018-04-11 11:07:08
    高德地图定位+围栏.......................................................
  • 自己根据高德地图API写了个定位功能,亲测可以实现定位功能,点击marker会显示当前的所在位置,实现地图的3D效果。
  • 里面包含了elementui结合高德地图定位已经位置标记相关的资料,里面的定位组件下载就可使用,包含组件和说明文档。
  • 高德地图关于地图使用,定位功能,检索功能,导航功能
  • web端高德地图定位

    2021-06-12 20:17:44
    'RB', //定位按钮的停靠位置 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 }); map....
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
        <style type="text/css">
            html, body, #container {
                height: 100%;
            }
    
            .info {
                width: 20rem;
            }
        </style>
    
    
    </head>
    <body>
    
    <div id="container"></div>
    
    
    <div class="info">
        <h4 id='status'></h4>
        <hr>
        <p id='result'></p>
        <hr>
        <p>由于众多浏览器已不再支持非安全域的定位请求,为保位成功率和精度,请升级您的站点到HTTPS。</p>
    </div>
    
    
    <!--key填写自己的-->
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.7&key=aef0adeda4d33acf723d2113ec657ece"></script>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            resizeEnable: true
        });
    
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位,默认:true
                timeout: 10000,          //超过10秒后停止定位,默认:5s
                buttonPosition: 'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
    
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                if (status == 'complete') {
                    onComplete(result)
                } else {
                    onError(result)
                }
            });
        });
    
        //解析定位结果
        function onComplete(data) {
            document.getElementById('status').innerHTML = '定位成功'
            var str = [];
            str.push('定位结果:' + data.position);
            str.push('定位类别:' + data.location_type);
            if (data.accuracy) {
                str.push('精度:' + data.accuracy + ' 米');
            }//如为IP精确定位结果则没有精度信息
            str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
            document.getElementById('result').innerHTML = str.join('<br>');
        }
    
        //解析定位错误信息
        function onError(data) {
            document.getElementById('status').innerHTML = '定位失败'
            document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
        }
    
    
    </script>
    
    </body>
    </html>
    
    

    在这里插入图片描述

    展开全文
  • js-vue-高德-实时定位.zip vue集成高德地图,实时定位用户当前位置经纬度,并在高德地图上显示具体位置 方法简便,丢入即可使用 vue集成高德地图,实时获取用户的位置经纬度,并在地图显示具体位置
  • 前不久用mui做一个电商的app,有定位需求,所以做了一个高德地图web端的定位
  • 我们需要到高德开放平台生成key 我这里选的是web端,提交后会生成一个key值 2.安装vue-amap npm install vue-amap --save 在项目main.js引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始化...

    1.获取key

    我们需要到高德开放平台生成key
    在这里插入图片描述


    我这里选的是web端,提交后会生成一个key值
    在这里插入图片描述

    2.安装vue-amap

    npm install vue-amap --save
    

    在项目main.js引入vue-amap

    import AMap from 'vue-amap';
    Vue.use(AMap);
    
      // 初始化vue-amap
    AMap.initAMapApiLoader({
      // 高德key
      key: '放入你的key',
      // 插件集合 (插件按需引入)
      plugin: ['AMap.Geolocation'] 
      //AMap.Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段,提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。
    });
    

    3.使用

    <template>
      <div class="box">
        <div :style="{width:'100%',height:'300px'}">
          <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
          </el-amap>
        </div>
      </div>
    </template>
    
    <script>
    export default {
        data(){
          const self = this;
          return {
            center: [121.59996, 31.197646],
            lng: 0,
            lat: 0,
            loaded: false,
            plugin: [{
              enableHighAccuracy: true,//是否使用高精度定位,默认:true
              timeout: 100,          //超过10秒后停止定位,默认:无穷大
              maximumAge: 0,           //定位结果缓存0毫秒,默认:0
              convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
              showButton: true,        //显示定位按钮,默认:true
              buttonPosition: 'RB',    //定位按钮停靠位置,默认:'LB',左下角
              showMarker: true,        //定位成功后在定位到的位置显示点标记,默认: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) {
                      self.lng = result.position.lng;
                      self.lat = result.position.lat;
                      self.center = [self.lng, self.lat];
                      self.loaded = true;
                      self.$nextTick();
                    }
                  });
                }
              }
            }]
          }
        }
    }
    </script>
    

    以上就是高德地图的简单使用

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,171
精华内容 5,668
关键字:

高德地图定位

友情链接: SortTest.zip