高德地图应用

来源：互联网发布：基姆拉尔森公式c语言编辑：程序博客网时间：2024/04/30 04:29

转自：http://odoodevelop.lofter.com/

留着备用

openerp的地图应用是运用qweb来实现的。在xml中声明一个div，然后在js中初始化地图放到声明的div里即可。在js中会把这一系列的初始化地图，加载等动作注册为一个openerp的widget。最后在相关的视图页面引用这个widget即可。所有，我们如果要运用新的地图，我们只需要修改地图相关的js和xml即可。

二，高德地图实现

在进行修改之前，我们首先要把高德地图的javascript的api复制到一个静态文件之中。然后在进行如下代码的修改，修改完后在__openerp__.py中导入gaodeapi.js，gaode.js，gaode.xml即可。

gaode.xml：

<?xml version="1.0" encoding="UTF-8"?>

    <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');

}

0 0