• 高德地图


    引用高德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);
        },

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

  • 相关阅读:
    MQTT Retained消息和LWT和Keep Alive(转)
    ant design 1.x中走马灯记录
    通过Array构造指定长度的数组
    Unicode编码与中文的相互转换
    在谷歌控制台调试代码如何换行
    辅助工具
    vue中扩展函数,除了原有的事件中传的参数增加自己传的参数
    使用allparis正交法,生成测试用例
    vue 字写的tab切换两个列表,在IOS上出现列表数据错乱的问题。
    Redis中的原子操作(2)redis中使用Lua脚本保证命令原子性
  • 原文地址:https://www.cnblogs.com/haimingpro/p/4287471.html
Copyright © 2020-2023  润新知