|
先说明一下我的业务需求:用户点击按钮,跳转界面并显示地图信息,在地图中显示当前用户所负责的各个场所坐标,点击其中一个场所坐标可以显示出当前场所名称。
因为我数据库表中已经有各个场所的X轴和Y轴坐标,加载页面,只需要添加过滤条件找到用户负责场所的坐标。代码如下:
// 页面加载 接收参数
Model.prototype.modelParamsReceive = function(event) {
var pl_informat = this.comp("pl_informat");
var placeData = this.comp("placeData");
fPL_PHONE = event.data.data.fPL_PHONE;
pl_informat.setFilter("filterA", "PL_informat.fPL_PHONE = '" + fPL_PHONE + "'");
pl_informat.refreshData();
placeData.setFilter("f1", "JWP_PERSONPLACE.JWP_POLICEPHONE = '" + fPL_PHONE + "'");
placeData.refreshData();
};
===================================================================
// 页面加载 所用到KEY
Model.prototype.modelLoad = function(event) {
require([ 'http://api.map.baidu.com/api?v=1.4&ak=o9pzum8sF8s3wqodZnt9S5OsKlLdjOil&callback=_baiduInit' ], function() {
if (window.BMap && window.BMap.Map) {
window._baiduInit();
}
});
};
======================================================================
// 点击按钮 显示地图 代码基本上都是固定的 我也是在网上查资料自己再进行完善,重点是取到X轴、Y轴坐标
Model.prototype.button1Click = function(event) {
var button1 = this.comp("button1");
var placeData = this.comp("placeData");
var x = placeData.getValue("JWP_X");
var y = placeData.getValue("JWP_Y");
var map = new BMap.Map("allmap"); // 拿到现实地图div的ID
var point = new BMap.Point(x, y);
map.centerAndZoom(point, 15); // 显示地图大小
// 定义json_data数组
var json;
var json_data = [];
placeData.count();
placeData.each(function(param) {
json = [ param.row.val("JWP_X"), param.row.val("JWP_Y"), '店铺名:' + param.row.val("JWP_PLACE") ];// 获取当前行X轴、Y轴坐标,将获取的坐标放入到json数组中
json_data.push(json); // 将装有X轴、Y轴坐标的json数组放到json_data数组中
});
// 输入固定值测试是否能找到当前坐标
// var json_data = [ [ 116.404, 39.915 ], [ 116.383752, 39.91334 ],
// [116.384502, 39.932241 ] ];
var pointArray = new Array();
var opts = {
width : 200, // 信息窗口宽度
height : 60, // 信息窗口高度
title : "", // 信息窗口标题
enableMessage : true
// 设置允许信息窗发送短息
};
for (var i = 0; i < json_data.length; i++) {
var marker = new BMap.Marker(new BMap.Point(json_data[0], json_data[1])); // 创建点
map.addOverlay(marker); // 增加点
pointArray = new BMap.Point(json_data[0], json_data[1]);
var content = json_data[2];
addClickHandler(content, marker);
}
// 让所有点在视野范围内
map.setViewport(pointArray);
function addClickHandler(content, marker) {
marker.addEventListener("click", function(e) {
openInfo(content, e)
});
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); // 开启信息窗口
}
// 移动到某一坐标点
function to(x, y) {
map.panTo(new BMap.Point(x, y));
}
};
|
-
效果图
|