OpenERP|ODOO高德地图应用

Posted 2020-07-24 Chen Jian

发布时间：2015-04-06 11:01:37来源：http://www.chinamaker.net
 在openerp中的fleet模块，每一个车辆都有地图应用。默认采用的是谷歌地图，但是在应用得时候如果想换其他的地图该怎么做那？以下我们以国内市 面上比较流行的高德地图为例，给大家分析一下如何换地图。
    一，openerp的地图设计思路
    openerp的地图应用是运用qweb来实现的。在xml中声明一个div，然后在js中初始化地图放到声明的div里即可。在js中会把这一系列的初 始化地图，加载等动作注册为一个openerp的widget。最后在相关的视图页面引用这个widget即可。所有，我们如果要运用新的地图，我们只需 要修改地图相关的js和xml即可。
    二，高德地图实现
    在进行修改之前，我们首先要把高德地图的javascript的api复制到一个静态文件之中。然后在进行如下代码的修改，修改完后在__open
erp__.py中导入gaodeapi.js，gaode.js，gaode.xml即可。
    gaode.xml：
    <?xml version="1.0" encoding="UTF-8"?>
    <templates xml:space="preserve">
    <t t-name="WidgetGaodeCoordinates">
           <div id="container" class="gaode"></div>
    </t>
    </templates>
 
    gaode.js：
    openerp.fleet = function(instance) {
    var _t = instance.web._t,
        _lt = instance.web._lt;
    var QWeb = instance.web.qweb;
    instance.fleet = {};
    instance.web.form.widgets.add(‘color‘, ‘instance.oepetstore.FieldColor‘);
    instance.fleet.WidgetGaodeCoordinates = instance.web.form.FormWidget.extend({
        init: function() {
            this._super.apply(this, arguments);
        },
        start: function() {
            this._super();
            this.field_manager.on("field_changed:provider_latitude", this, this.display_map);
            this.field_manager.on("field_changed:provider_longitude", this, this.display_map);
            this.on("change:effective_readonly", this, this.display_map);
            this.display_map();           
        },
        
        display_map: function() {
            var self = this;
            var provider_latitude = this.field_manager.get_field_value("provider_latitude");
            var provider_longitude = this.field_manager.get_field_value("provider_longitude");
            this.$el.html(QWeb.render("WidgetGaodeCoordinates", {
                "latitude": provider_latitude || 0,
                "longitude": provider_longitude || 0,
            }));
            var mapObj = new AMap.Map("container");
            
            mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function(){  
                //加载工具条  
                tool=new AMap.ToolBar({  
                  direction:false,//隐藏方向导航  
                  ruler:false,//隐藏视野级别控制尺  
                  autoPosition:false//禁止自动定位  
                });  
                mapObj.addControl(tool);  
                //加载鹰眼  
                view=new AMap.OverView();  
                mapObj.addControl(view);  
                //加载比例尺  
                scale=new AMap.Scale();  
                mapObj.addControl(scale);  
              });  
            
            var marker = new AMap.Marker({
                id:"m",
                position:new AMap.LngLat(provider_latitude,provider_longitude),
                offset: new AMap.Pixel(-8,-34),
                icon: "http://webapi.amap.com/static/images/marker_sprite.png",
                level: 15
            });
            var point = new AMap.LngLat(provider_latitude, provider_longitude);
            mapObj.setCenter(point);
            mapObj.addOverlays(marker);
        },
    });
    instance.web.form.custom_widgets.add(‘coordinates‘, ‘instance.fleet.WidgetGaodeCoordinates‘);
}