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

高德地图

时间:2015-02-12 12:17:51      阅读:599      评论:0      收藏:0      [点我收藏+]

标签:

引用高德FC

技术分享
itu.fcontrol.define("amap", {
    // The properties of the function control.
    config : {
        
    },
    
    /**
     * the map instance
     */
    _mapObj : null,
    
    /**
     * the center position of the map
     */
    _centerLngLat : null,
    
    /**
     * The constructor for the class
     */
    constructor : function() {
        iAuto.Logger.log("[amap] constructor");
        
        var me = this;
        
        me._geocoderCallBack = iAuto.Util.bind(me, me._geocoderCallBack);
        me._geocoderFailedCallBack = iAuto.Util.bind(me, me._geocoderFailedCallBack);
    },
    
    /**
     * Draw map according to the (lng,lat.zoom)
     * @param {String }domId
     * @param {Number} lng
     * @param {Number} lat
     * @param {Number} zoom
     */
    drawMap : function(domId, lng, lat, zoom) {
        iAuto.Logger.log("[amap] drawMap");
        
        var me = this;
        
        //create the AMAP position object
        me._centerLngLat = new AMap.LngLat(lng, lat);
        
        //create the view port
        var viewPort =  new AMap.View2D({ //create the 2D-dimension view port
                              center : me._centerLngLat, //set the coordinate of the map center
                              zoom : zoom //set the level of zoom
                           });
        
        //create the map options
        var mapOptions = {view : viewPort,
                          lang : "zh_cn",
                          zooms:[3, 19],
                          rotateEnable : true,
                          dragEnable : true,
                          zoomEnable : true};
        
        //create the map
        me._mapObj = new AMap.Map(domId, mapOptions);        
    },
    
    /**
     * Draw marker(map center and the indicated position) on the map
     * @param {Number} lng
     * @param {Number} lat
     */
    drawMarker : function(lng, lat) {
        iAuto.Logger.log("[amap] drawMarker");
        
        var me = this;
        var pixelOffset = new AMap.Pixel(-23,-46);
        
        new AMap.Marker({ //创建自定义点标注                 
                  map: me._mapObj,                 
                  position: me._centerLngLat,                 
                  offset: pixelOffset,                 
                  icon: "resources/img/dp_033.png"                 
        });
        
        new AMap.Marker({ //创建自定义点标注                 
                  map: me._mapObj,                 
                  position: new AMap.LngLat(lng, lat),                 
                  offset: pixelOffset,                 
                  icon: "resources/img/dp_034.png"                 
        });
    },
    
    /**
     * transform (lng, lat) to city
     * @param lng
     * @param lat
     */
    transformLngLatToCity : function(lng, lat) {
        var me = this;
        var lnglatXY = new AMap.LngLat(lng, lat); 

        me._mapObj.plugin(["AMap.Geocoder"], function(){  
            iAuto.Logger.log("[amap] AMap.Geocoder has been created");
            
            //create AMap.Geocoder            
            var geocoder = new AMap.Geocoder({});
                        
            //return code result 
            AMap.event.addListener(geocoder, "complete", me._geocoderCallBack); 
            AMap.event.addListener(geocoder, "error", me._geocoderFailedCallBack); 
                        
            //reverse code 
            iAuto.Logger.log("[amap] AMap.Geocoder started: " + new Date());
            geocoder.getAddress(lnglatXY); 
        }); 
    },
    
    /**
     * Callback of AMap.LngLat complete
     */
    _geocoderCallBack : function(data) {
        iAuto.Logger.log("[amap], _geocoder CallBack: " + new Date());
        
        var me = this;
        
        var city = null;
        if (data.info === "OK") {
            var addressComponent = data.regeocode.addressComponent;
            if (addressComponent.city !== "") {
                city = addressComponent.city;
            }
            else {
                city = addressComponent.province;
            }
            
            iAuto.Logger.log("[amap] geocoder succeed!,the city is: " + city);
            
            city = me._convertCity(city);
        }
                
        me.trigger("getCurrentCityReplied", city);
    },
    
    /**
     *  Callback of AMap.LngLat complete error
     */
    _geocoderFailedCallBack : function(errInfo) {
        iAuto.Logger.log("[amap], _geocoder failed CallBack");
        
        var me = this;
        
        me.trigger("getCurrentCityReplied", null);
    },
    
    /**
     * Convert the city format from AMAP to DIANPING
     */
    _convertCity : function(city) {
        iAuto.Logger.log("[amap], _convertCity");
        
        var lastCharacter = city.substr(city.length-1, 1);
        if ((lastCharacter === "") || (lastCharacter === "")) {
            city = city.substr(0, city.length-1);
        }
        
        //amapToDianPing config.js
        var iCity = amapToDianPing[city];
        if (!iCity) {
        }
        else {
            city = iCity;
        }
        
        return city;
    }
});
amap.js

在common.js中异步加载lib

/**
 * load AMAP JS-LIB by async mode ,key 被我用*号隐藏了
 */
com_loadAMapLib = function() {var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://webapi.amap.com/maps?v=1.3&key=********************&callback=com_amapLoaded";
    document.body.appendChild(script);
};

/**
 * set the indicator to show AMAP lib has been loaded
 */
 //can‘t move to namespace ,because callback url
com_amapLoaded = function() {
    _dataContainer.amapLoaded = true;
};

在winscape中加载FC

_createCmp_ : function() {
    itu.fcontrol.start(amap);
}

初始化map的方法

if (!_dataContainer.amapLoaded) {
            com_loadAMapLib();
            me._amapLoadInterval = setInterval(me._checkAmapLibLoaded, 200);
        } else {
            me._drawMapAndMarker();
        }

绘制地图

    /**
     * Check AMAP LIB is loaded or not
     */
    _checkAmapLibLoaded : function() {
   
     var me = this;

        if (_dataContainer.amapLoaded) {
            //clear the interval
            clearInterval(me._amapLoadInterval);
            me._amapLoadInterval = null;

            //convert the current position to address
            me._drawMapAndMarker();
        }
    },
    
    /**
     * Draw map according to lng-lat
     */
    _drawMapAndMarker : function() {var me = this;
        
        //draw the map
        var amap = me.getCmp("amap");
        //me.Data[0],me.Data[1]
        amap.drawMap("map", 121.47 , 31.23, 17);//这里前两位是要显示的位置,我写了个上海黄浦的固定值来测试
        
        //draw the markers overlay
        amap.drawMarker(_dataContainer.currentLng,_dataContainer.currentLat);
    },

高德只能画国内的经纬度,国际还得谷歌。

高德地图

标签:

原文地址:http://www.cnblogs.com/haimingpro/p/4287471.html

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