高德地图demo

高德地图API: https://lbs.amap.com/api/javascript-api/summary

高德地图分别用到了 实时定位 搜索 行政区域 标注 一开始把demo上的例子拷贝过来的时候没看js 以为拿过来就可以用  但事实不是这样的  

高德的只能引入一个js  但js后面可以跟方法 逗号分割  &plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch…………

<div class="ibox float-e-margins">
    <!-- 引入地图 -->
    <div class="col-sm-12" style="margin-bottom: 10px;">
        <div id="gisDiv"></div><!-- js中初始化大小 -->
    </div>
    <div class="ibox-content">
        <div class="form-horizontal">
            <form id="BasStationGisposForm">
            <input type="hidden" id="id" value="">
            <div class="row">
                 <div class="col-sm-6 b-r">
        <#input id="gisposcode"  placeholder="位置编码  例如： " 
    name="位置编码"  value="" underline="true"/>
        <!-- <#input id="address"  placeholder="地址  例如： " onchange="geocoder(this)"
    name="地址"  value="" underline="true"/> -->
        <div class="form-group">
            <label class="col-sm-3 control-label">地址</label>
            <div class="col-sm-9">
                <input id="addr" class="form-control" placeholder="地址  例如： " name="addr" value="" ><!-- onchange="geocoder(this)" -->
                <input id="address" name="address" value="" type="hidden">
            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <#input id="latitude"  placeholder="纬度  例如： 0.000000" disabled="true"
    name="纬度"  value="0.000000" underline="true"/>
        <#input id="roadcode"  placeholder="道路编码  例如： " 
    name="道路编码"  value="" underline="true"/>
                </div>
                <div class="col-sm-6">
                         <#dictSelector id="positiontype" quryflag="false" code="positiontype"   underline="true"
  readonly="false"     label="位置信息类别 " value="" type="select" />
          <#input id="longitude"  placeholder="经度  例如： 0.000000" disabled="true"
                                name="经度"  value="0.000000" underline="true"/>
          <#input id="areacode"  placeholder="行政区域  例如： " disabled="true"
                                name="行政区域"  value="" underline="true"/>
          <#input id="mileage"  placeholder="桩号  例如： " 
                                name="桩号"  value="" underline="true"/>
                          </div>
            </div>
            <div class="row btn-group-m-t">
                <div class="col-sm-10">
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="BasStationGisposInfoDlg.addSubmit()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="BasStationGisposInfoDlg.close()"/>
                </div>
            </div>
       </form>
        </div>

    </div>
</div>
<script src="${ctxPath}/static/moddiy/bas/basStationGispos/basStationGispos_info.js"></script><!-- 多个插件用逗号隔开 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=自己的key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.ToolBar"></script>
<!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> -->
<script>
    $("#gisDiv").css("height",($(window).height()/2)+"px");
    var lnglatXY = [113.151737,27.835806];
    var geolocation;
    var map = new AMap.Map('gisDiv',{
        resizeEnable: true
        ,zoom: 14  //级别
        //,center: lnglatXY //初始化位置
    });
    /* AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],function(){
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
    }); */
    //浏览器定位
    /* map.plugin('AMap.Geolocation',function(){
        geolocation = new AMap.Geolocation({
            //是否使用高精度定位,默认: true
            enableHighAccuracy: true,
            //设置定位超时时间,默认: 无穷大
            timeout: 1000,
            //定位按钮的停靠位置的偏移量,默认: Pixel(10,20)
            buttonoffset: new AMap.Pixel(10,20),
            //定位成功后调整地图视野范围使定位及精度范围视野内可见,默认: false
            zoomToAccuracy: true,
            //定位按钮的排放位置,RB表示右下
            buttonPosition: 'RB'
        });
        
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation,'complete',onComplete);
        AMap.event.addListener(geolocation,'error',onError);
        function onComplete(data){
            //dada是具体的定位信息
            //console.log(data);
            if(data.info == 'SUCCESS'){
                $("#address").val(data.formattedAddress);
                   $("#addr").val(data.formattedAddress);
                   $("#areacode").val(data.addressComponent.adcode);
                   $("#longitude").val(data.position.lng);
                   $("#latitude").val(data.position.lat);
                   map.remove(marker);
                   marker = new AMap.Marker({//加点
                       position:[$("#longitude").val(),$("#latitude").val()]
                   });
                   marker.setMap(map);
            }
        }
        function onError(data){
            //定位出错
            alert("出错了");
        }
    }); */
    var lngi = map.getCenter().lng;
    var lati = map.getCenter().lat;
    var marker = new AMap.Marker({//加点
        position: [lngi, lati ]
    });
    marker.setMap(map);
    $('#longitude').val(lngi);
    $('#latitude').val(lati);
    lnglatXY = [lngi,lati];
    //regeocoder();//初始调用
    AMap.event.addListener(map,'click',function(e){//事件
        var lnglat = new AMap.LngLat(parseInt(e.lnglat.lng),parseInt(e.lnglat.lng));
        map.remove(marker);
        marker = new AMap.Marker({//加点
            position:[e.lnglat.lng,e.lnglat.lat]
        });
        marker.setMap(map);
        $("#longitude").val(e.lnglat.lng);
        $("#latitude").val(e.lnglat.lat);
        lnglatXY = [e.lnglat.lng,e.lnglat.lat];
        regeocoder();
    });
    //逆地理编码
    function regeocoder(){//根据点坐标获得地址名称
        var geocoder = new AMap.Geocoder({
            radius:1000,
            extensions:"all"
        });
        geocoder.getAddress(lnglatXY,function(status,result){
            if(status === 'complete' && result.info === 'OK'){
                geocoder_CallBack(result);
            }
            map.setFitView();
        })
    }
    
    function geocoder_CallBack(data){
        //console.log(data);
        if(data.regeocode){
            var address = data.regeocode.formattedAddress;//返回地址描述
            var adcode = data.regeocode.addressComponent.adcode;//返回地区编码
            $("#addr").val(address);
            $("#address").val(address);
            $("#areacode").val(adcode);
        }else{
            //地理编码结果数组
            var geocodes = data.geocodes[0];//默认第一个
            
               $("#address").val(geocodes.formattedAddress);
               $("#addr").val(geocodes.formattedAddress);
               $("#areacode").val(geocodes.addressComponent.adcode);
               $("#longitude").val(geocodes.location.getLng());
               $("#latitude").val(geocodes.location.getLat());
               map.remove(marker);
               marker = new AMap.Marker({//加点
                   position:[$("#longitude").val(),$("#latitude").val()]
               });
               marker.setMap(map);
        }
        
    }
    
    //地理编码有问题
    /* function geocoder(thises){
        var address = thises.value;
        console.log(address);
        if(address == null || address == ''){
            Feng.info("输入不能为空");
            return;
        }
        var geocoder = new AMap.Geocoder({
            city: "0731" //城市电话号码地区编码,默认: '全国'
            ,radius: 1000 // 范围
        });
        //地理编码,返回地理编码结果
        geocoder.getLocation(address,function(status,result){
            if(status === 'complete' && result.info === 'OK'){
                geocoder_CallBack(result);
            }
        });
    } */
    
    var auto = new AMap.Autocomplete({
        input: "addr"
    });
    
    AMap.event.addListener(auto,"select",select);
    
    function select(e){
        if(e.poi && e.poi.location){
            //console.log($("#address").val());
            //console.log(e);
            //TODO 针对选中的poi实现自己的功能
            map.setCenter(e.poi.location);
            $("#address").val(e.poi.district + e.poi.name);
            $("#addr").val(e.poi.district + e.poi.name);
               $("#areacode").val(e.poi.adcode);
               $("#longitude").val(e.poi.location.lng);
               $("#latitude").val(e.poi.location.lat);
               map.remove(marker);//删除点
               marker = new AMap.Marker({//加点
                   position:[$("#longitude").val(),$("#latitude").val()]
               });
               marker.setMap(map);//设置
        }
    }
    
    //工具
    map.plugin(['AMap.ToolBar','AMap.Geolocation'],
        function(){
            toolopt = {
                offset :new AMap.Pixel(10,10),//相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
                /*
                 *控件停靠位置
                 *LT:左上角;
                 *RT:右上角;
                 *LB:左下角;
                 *RB:右下角;
                 *默认位置：LT
                 */
                position : 'LT',
                ruler : true,//标尺键盘是否可见，默认为true
                noIpLocate : false,//定位失败后，是否开启IP定位，默认为false
                locate : true,//是否显示定位按钮，默认为false
                liteStyle : false,//是否使用精简模式，默认为false
                direction : true,//方向键盘是否可见，默认为true
                autoPosition : true,//是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地，在支持HTML5的浏览器中有效，默认为false
                locationMarker : AMap.Marker({map: map}),
                /**
                 *是否使用高德定位sdk用来辅助优化定位效果，默认：false.
                 *仅供在使用了高德定位sdk的APP中，嵌入webview页面时使用
                 *注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，
                 *还需要调用高德定位idk中，AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能；
                 *不用时，可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册
                 */
                useNative : false
            }
            var toolbar  = new AMap.ToolBar(toolopt);
            //toolbar.hide();//隐藏toolbar

            map.addControl(toolbar);
            //启动监听
            toolbar.on('location',function(data){
                //console.log("定位回调: "+data);
                $("#longitude").val(data.lnglat.lng);
                   $("#latitude").val(data.lnglat.lat);    
                lnglatXY = toolbar.getLocation();
                regeocoder();//根据坐标返回地址信息
                map.remove(marker);
                   marker = new AMap.Marker({//加点
                       position:[$("#longitude").val(),$("#latitude").val()]
                   });
                   marker.setMap(map);
            });
            ///
            geolocation = new AMap.Geolocation({
                //是否使用高精度定位,默认: true
                enableHighAccuracy: true,
                //设置定位超时时间,默认: 无穷大
                timeout: 1000,
                //定位按钮的停靠位置的偏移量,默认: Pixel(10,20)
                buttonoffset: new AMap.Pixel(10,20),
                //定位成功后调整地图视野范围使定位及精度范围视野内可见,默认: false
                zoomToAccuracy: true,
                //定位按钮的排放位置,RB表示右下
                buttonPosition: 'RB'
            });
            
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation,'complete',onComplete);
            AMap.event.addListener(geolocation,'error',onError);
            function onComplete(data){
                //dada是具体的定位信息
                //console.log(data);
                if(data.info == 'SUCCESS'){
                    $("#address").val(data.formattedAddress);
                       $("#addr").val(data.formattedAddress);
                       $("#areacode").val(data.addressComponent.adcode);
                       $("#longitude").val(data.position.lng);
                       $("#latitude").val(data.position.lat);
                       map.remove(marker);
                       marker = new AMap.Marker({//加点
                           position:[$("#longitude").val(),$("#latitude").val()]
                       });
                       marker.setMap(map);
                }
            }
            function onError(data){
                //定位出错
                Feng.info("定位异常!!");
            }
        }
    );
</script>

注意踩坑:

map.plugin(['AMap.ToolBar','AMap.Geolocation'],function(){
　　//所有插件的事件和方法只能在这个里面调用
　　//比如:

　　var toolbar  = new AMap.ToolBar(toolopt);　

　　map.addControl(toolbar);

//启动监听

/*

使用ToolBar定位按钮或doLocation函数进行定位，定位完成时触发此事件，浏览器须支持html5
type: 事件类型
lnglat: 定位结果坐标值

*/
toolbar.on('location',function(data){ //事件
//console.log("定位回调: "+data);
$("#longitude").val(data.lnglat.lng);
$("#latitude").val(data.lnglat.lat);
lnglatXY = toolbar.getLocation();
regeocoder();//根据坐标返回地址信息
map.remove(marker);
marker = new AMap.Marker({//加点
position:[$("#longitude").val(),$("#latitude").val()]
});
marker.setMap(map);
});

});