web开发如何使用高德地图API（一）浏览器定位

时间：2024-01-29 12:11:08

说两句：

  • 以下内容除了我自己写的部分，其他部分在高德开放平台都有（可点击外链访问）。
  • 我所整理的内容以实际项目为基础希望更有针对性的，更精简。
  • 点击直奔主题。

准备工作：

  • 首先，注册开发者账号，成为高德开放平台开发者
  • 登陆之后，在进入「应用管理」 页面「创建新应用」
  • 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告诉你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

 

显示基础地图所用到的HTML和JS

<body>
<div id="container"></div>
</body>

 

<script type="text/javascript">
    var map = new AMap.Map(\'container\', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]//默认的地图中心经纬度
    });
</script>

 

引入高德地图工具包js文件

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

 

浏览器定位所用到的JS

/**
 * Created by Mark on 2018/5/3.
 */
//定位
map.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
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, \'complete\', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, \'error\', onError);      //返回定位出错信息
});

//解析定位结果
function onComplete(data) {
    if(data.status == 1){
        console.log("定位成功");
        $("#addressInput").val(data.formattedAddress);
        sessionStorage.setItem("dingWei-lng",data.position.getLng());
        sessionStorage.setItem("dingWei-lat",data.position.getLat());
    }
    var str = [];
    str.push(\'经度：\' + data.position.getLng());
    str.push(\'纬度：\' + data.position.getLat());
    str.push(\'是否经过偏移：\' + (data.isConverted ? \'是\' : \'否\'));
    console.log(str.join(\'<br>\'));
}
function onError() {
    var str = [];
    str.push(\'定位失败\');
    console.log(str.join(\'<br>\'));
}

 

到这里为止，使用高德地图实现浏览器定位已经完成了。
但是...^_^
/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
***************************************/

 

相关文章