起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 4111|回复: 0

[分享] 通过X轴、Y轴坐标进行多点地图定位

[复制链接]

5

主题

22

帖子

62

积分

初级会员

Rank: 2

积分
62
QQ
发表于 2018-6-14 09:38:28 | 显示全部楼层 |阅读模式
先说明一下我的业务需求:用户点击按钮,跳转界面并显示地图信息,在地图中显示当前用户所负责的各个场所坐标,点击其中一个场所坐标可以显示出当前场所名称。


因为我数据库表中已经有各个场所的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));

                }

        };

效果图

效果图
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-4-24 10:34 , Processed in 0.102448 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表