码迷,mamicode.com
首页 > 其他好文 > 详细

高德地图 – 1.问题集锦

时间:2015-08-07 15:59:09      阅读:4495      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

 

1.自动加载文本框的坐标,并在地图标注点。

2.点击地图时,并且“逆地理编码”解析出地址方在文本框

 

js

        var lnglatXY;
        var marker;

        //初始化地图对象,加载地图
        var map = new AMap.Map(‘mapContainer‘, {
            resizeEnable: true,
            view: new AMap.View2D({
                center: new AMap.LngLat(106.461983, 29.516409),
                zoom: 10,
            })
        });


        //加点
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/images/marker_sprite.png",
            position: new AMap.LngLat($("#EditFormMap input[name=‘longitude‘]").val(), $("#EditFormMap input[name=‘latitude‘]").val())
        });

        //uncaught exception: Invalid Object: Pixel(NaN, NaN)
        //这里报这个错误,是因为不能读取到$("#EditFormMap input[name=‘longitude‘]").val(), $("#EditFormMap input[name=‘latitude‘]").val() 的值
        //因为要在本页点【地图】按钮,才会赋值。所以该注销掉
        //marker.setMap(map);  //在地图上添加点



        AMap.event.addListener(map, ‘click‘, getLnglat);


        //鼠标在地图上点击,获取经纬度坐标
        function getLnglat(e) {
            map.clearMap(); //删除地图上的所有覆盖物

            //经度赋值
            document.getElementsByName(‘longitude‘).value = e.lnglat.getLng();
            $("#EditFormMap input[name=‘longitude‘]").attr("value", e.lnglat.getLng())
            //纬度赋值
            document.getElementsByName(‘latitude‘).value = e.lnglat.getLat();
            $("#EditFormMap input[name=‘latitude‘]").attr("value", e.lnglat.getLat());

            //逆地址编码需要的 X,Y
            lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
            geocoder();
        }

        function geocoder() {
            var MGeocoder;
            //加载地理编码插件
            map.plugin(["AMap.Geocoder"], function () {
                MGeocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });
                //返回地理编码结果 
                AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);
                //逆地理编码
                MGeocoder.getAddress(lnglatXY);
            });

            //加点
            marker = new AMap.Marker({
                icon: "http://webapi.amap.com/images/marker_sprite.png",
                position: lnglatXY,

            });

            marker.setMap(map);  //在地图上添加点

            //map.setFitView(); //缩放平移地图到合适的视野级别,

        }

        //回调函数
        function geocoder_CallBack(data) {

            var address;
            //返回地址描述
            address = data.regeocode.formattedAddress;
            //console.info($("#EditFormMap input[name=‘address‘]"))
            //返回结果赋值(地址栏)
            //$("#EditFormMap input[name=‘address‘]").attr("value", address);
            $("#EditFormMap input[name=‘address‘]").attr("value", address);
        }

 

html

                <tr>
                    <th align="right">经度:</th>
                    <td>
                        <input id="longitude" name="longitude" class="easyui-validatebox" data-options="required:true">
                        <font color="red">*.(经纬度直接鼠标在地图选取)</font>
                    </td>
                </tr>
                <tr>
                    <th align="right">纬度:</th>
                    <td>
                        <input id="latitude" name="latitude" class="easyui-validatebox" data-options="required:true">
                        <font color="red"></font>
                    </td>
                </tr>
                <tr>
                    <th align="right">地址:</th>
                    <td>
                        <input id="address" name="address" class="easyui-validatebox" style="width: 300px" data-options="required:true,validType:‘maxlength[21]‘">
                    </td>
                </tr>

 

 

问题一:

  状况1.点击地图,光改变文本框的值,地图上不加载图标

  状况2.经常出现“AMap.Geocoder is not a constructor

原因:

技术分享

多次加载,easyui的原因。去掉就可以了。

高德地图 – 1.问题集锦

标签:

原文地址:http://www.cnblogs.com/tangge/p/4710997.html

(3)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!