高德地图javascriptAPI基本使用心得(上)

高德地图主要用于移动APP的开发提供便利的api,这里列出几种前端javascript对高德的使用方法,更多方式详见 http://lbs.amap.com/api/javascript-api/summary/
javascript引用高德,首先要注册高德开发平台账号,目的是为了获取开发过程所需要的key值,不同平台的开发需要申请不同的key值,对于不同key值的用途官方文档有详细介绍。博主在此用到web端key值和web服务的key值,key值主要用于页面引入高德插件时的src里 ,必填。
1.创建一个基本的高德地图

var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
 });

html代码

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

引入的高德插件

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

2.地理编码(通过一个地址,获取经纬度)

//地理编码
    function geocoder() {
        var geocoder = new AMap.Geocoder({
           // city: "全国", //城市,默认:“全国”
            radius: 1000 //范围,默认:500
        });
        //地理编码,返回地理编码结果
        var input = $("#addressinput").val();//输入你的地址
        geocoder.getLocation(input, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack1(result);
            }
        });
    }
//地理编码返回结果展示
    function geocoder_CallBack1(data) {
        var resultStr = "";
        //地理编码结果数组
        var geocode = data.geocodes;
        for (var i = 0; i < geocode.length; i++) {
            //拼接输出html
            resultStr += "<span style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>:" + geocode[i].formattedAddress + "" + "&nbsp;&nbsp;<b>的地理编码结果是:</b><b>&nbsp;&nbsp;&nbsp;&nbsp;坐标</b>:" + geocode[i].location.getLng() + ", " + geocode[i].location.getLat() + "" + "<b>&nbsp;&nbsp;&nbsp;&nbsp;匹配级别</b>:" + geocode[i].level + "</span>";
            addMarker(i, geocode[i]);
            lnglatXY = [geocode[i].location.getLng(),geocode[i].location.getLat()];
        }
        map.setFitView();
        document.getElementById("result").innerHTML = resultStr;
        regeocoder();
    }

 

posted @ 2017-04-06 11:27  文艺范儿m  阅读(4486)  评论(0编辑  收藏  举报