zoukankan      html  css  js  c++  java
  • 高德地图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();
        }
  • 相关阅读:
    无约束优化算法——牛顿法与拟牛顿法(DFP,BFGS,LBFGS)
    撤销重做功能实现
    疯狂值班表(人员跟日期生成的视图)
    从零开始---控制台用c写俄罗斯方块游戏(2)
    unity3d关于碰撞问题
    主进程和服务进程通信调用Acrobat.AcroPDDoc时出现的问题
    echarts
    Wpf DataGrid动态添加列,行数据(二)
    Wpf DataGrid动态添加列,行数据(一)
    wpf学习资料链接(做记录)
  • 原文地址:https://www.cnblogs.com/xiaomingge/p/6672639.html
Copyright © 2011-2022 走看看