地图封装，页面直接使用

最新推荐文章于 2022-06-26 23:44:06 发布
转载 最新推荐文章于 2022-06-26 23:44:06 发布 · 399 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5bc85ab55188255c775dd160
文章标签：

#json #javascript #ViewUI

百度地图
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=YdpDlI7MXOf9zn2jGAYamWeWYNf6XQqN"></script>
 ((window) =>{
     var BaiduMap = function (map, allStores, allMarkers, resultStores, resultMarkers) {
          if (this instanceof BaiduMap) {
              this.map = map;
              this.allStores = allStores;
              this.allMarkers = allMarkers;
              this.resultStores = resultStores;
              this.resultMarkers = resultMarkers;
              this.initCity = function () {
                  addressInit('province', 'city', 'district', '北京', '', '海淀区');
              }();
              this.eventBind().initMap();
          } else {
              new BaiduMap(map, allStores, allMarkers, resultStores, resultMarkers);
          }
      };

      BaiduMap.prototype.eventBind = function() {
          var _this = this;
          //三级联动查询门店
          $("#district").change(function () {
              var province = $("#province").val();
              var district = $("#district").val().substring(0, 2);
              var city = $("#city").val().substring(0, 2);
              _this.initMap('http://aris.xin.cebest.com:80/customformsubmit/search', {
                  "formId": "d7d6d1260ca44277a10d1755cc451ff4", /*  d7d6d1260ca44277a10d1755cc451ff4 */
                  "showCount": 1000,//每页显示条数
                  "condition": province
              });
          });

          //按钮门店查询
          $('#mapSearch').on('click', function () {
              var queryName = $("#queryName").val().substring(0, 2);
              _this.initMap('http://aris.xin.cebest.com:80/customformsubmit/search', {
                  "formId": "d7d6d1260ca44277a10d1755cc451ff4", /*  d7d6d1260ca44277a10d1755cc451ff4 */
                  "showCount": 1000,//每页显示条数
                  "condition": queryName
              });
          });
          return this;
      };
      BaiduMap.prototype.initMap = function (url, data) {
          var _this = this;
          _this.map = new BMap.Map("map_canvas"); // 创建Map实例
          _this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 6); // 初始化地图,设置中心点坐标和地图级别
          //添加地图类型控件
          _this.map.addControl(new BMap.NavigationControl({
              anchor: BMAP_ANCHOR_TOP_RIGHT
          }));
          _this.map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
          _this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
          url = url || 'http://aris.xin.cebest.com:80/form/list';
          data = data || {
              "formId": "d7d6d1260ca44277a10d1755cc451ff4", /*  d7d6d1260ca44277a10d1755cc451ff4 */
              "showCount": 1000//每页显示条数
          };
          var stores = [];
          var marker = []; //地图标记
          $.ajax({
              url: url,
              type: "Post",
              dataType: "json",
              data: data,
              success: function (data) {
                  if (data.data == null) {
                      return false;
                  }
                  if (data.data.recordData != null) {
                      $.each(data.data.recordData, function (index, obj) {
                          var cur = {};
                          if (this[4].name == null || this[4].name == '' || this[4].name == undefined) {

                          } else {
                              var p0 = this[4].name.split(",")[1] / 1;
                              var p1 = this[4].name.split(",")[0] / 1;
                              var brandname = obj[2].name.replace(/\s/g, "");//去掉所有空格
                              cur.address = obj[3].name;
                              cur.contact = '/';
                              cur.name = obj[3].name + "店地址:" + obj[2].name;
                              cur.opentime = obj[1].creatTime.toString();
                              cur.location = {
                                  xAxis: p0,
                                  yAxis: p1,
                                  brandType: brandname
                              };
                              stores.push(cur);
                          }
                      });

                      _this.map.clearOverlays();
                      _this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 6);
                      _this.allStores = stores;
                      for (var i = 0; i < stores.length; i++) {
                          //店铺标注
                          if (stores[i].location != null && stores[i].location != '') {
                              var point = new BMap.Point(stores[i].location.yAxis, stores[i].location.xAxis);
                              var typeName = stores[i].location.brandType;
                              marker[i] = new BMap.Marker(point); // 创建标注
                              _this.map.addOverlay(marker[i]);
                              _this.showInfomessage(marker[i], i); //调用显示信息窗口的函数
                          }
                      }
                      //左侧列表点击事件
                      $('.store-info .detail div').each(function (e) {
                          $(this).on('click', function () {
                              var infoWindow = new BMap.InfoWindow(
                                  '<p class="name fnt_16 bold">' + stores[e].name + '</p>' +
                                  '<p class="location fnt_14">' + stores[e].address + '</p>' +
                                  '<p class="opentime fnt_14">' + stores[e].opentime + '</p>');
                              marker[e].openInfoWindow(infoWindow);
                              map.centerAndZoom(marker[e].getPosition, 16); // 初始化地图,设置中心点坐标和地图级别
                              _this.map.centerAndZoom(marker[e].getPosition(), 17);
                          })
                      });
                      $('.search-type a').each(function (e) {
                          $(this).on('click', function () {
                              $(this).addClass('actived');
                              $(this).siblings().removeClass('actived');
                              if (e == 0) {
                                  $('.search .search-keyword').show();
                                  $('.search .search-nearby').hide();
                              } else {
                                  $('.search .search-keyword').hide();
                                  $('.search .search-nearby').show();
                              }
                          })
                      });
                  }
                  _this.checkSearchDetail(stores);
              }
          });
          return this;
      };
      BaiduMap.prototype.storeMarker = function (stores, markers) {
          for (var i = 0; i < stores.length; i++) {
              //店铺标注
              if (stores[i].location != null && stores[i].location != '') {
                  var point = new BMap.Point(stores[i].location.xAxis, stores[i].location.yAxis);
                  markers[i] = new BMap.Marker(point); // 创建标注
                  this.map.addOverlay(markers[i]);
                  this.showInfomessage(markers[i], i); //调用显示信息窗口的函数
              }
          }
      };
      /*
       *
       * 所有的marker位置上显示infowindow
       */
      BaiduMap.prototype.showInfomessage = function (marker, index) {
          var _this = this;
          marker.addEventListener("click", function (e) {
              var infoWindow = new BMap.InfoWindow(
                  '<p class="name fnt_16 bold">' + _this.allStores[index].name + '</p>' +
                  '<p class="location fnt_14">' + _this.allStores[index].address + '</p>'
              );
              marker.openInfoWindow(infoWindow);
          });
      };

      BaiduMap.prototype.searchStore = function () {
          var _this = this;
          _this.resultStores.splice(0, _this.resultStores.length);

          this.resultStores[0] = {
              name: '宫廷壹号杭州旗舰店',
              address: '杭州滨江大都会第六空间瑞弗国际',
              opentime: '周一至周日 09:00~22:00',
              contact: '冯国根 13858129878',
              location: {
                  xAxis: 120.199415,
                  yAxis: 30.202633
              }
          };

          $('.store-info .detail').empty();

          for (var i = 0; i < _this.resultStores.length; i++) {

              // 搜索到结果店铺渲染
              $('.store-info .detail').append(
                  '<div class="store">' +
                  '<p class="name fnt_14 bold">' + _this.resultStores[i].name + '</p>' +
                  '<p class="location fnt_12">' + _this.resultStores[i].address + '</p>' +
                  '<p class="opentime fnt_12">' + _this.resultStores[i].opentime + '</p>' +
                  '<p class="contact fnt_12">' + _this.resultStores[i].contact + '</p>' +
                  '</div>'
              )
          }
          map.clearOverlays();
          storeMarker(_this.resultStores, _this.resultMarkers);
          this.checkSearchDetail();
      };
      BaiduMap.prototype.checkSearchDetail = function (arr) {
          if (arr.length <= 0) {
              $('.detail').hide();
          } else {
              $('.detail').show();
              $('.noMessage').hide();
          }
      };

      window.BaiduMap = BaiduMap;
      BaiduMap();;
 }(window))
      
复制代码
谷歌地图
<script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false&language=en&key=AIzaSyAyXwq79dCk3XgeYR0eu8B6PzoCdA_jP3k"></script>
    var GoolMap = function (geocoder, map,infoWindow, mapData, datas ) {
        this.geocoder = geocoder;
        this.map = map;
        this.browserSupportFlag =  new Boolean();
        this.infoWindow = infoWindow;
        this.mapData = mapData || [];
        this.datas = datas || [];
        this.searchInit = function () {
            addressInit('province', 'city', 'district', '北京', '', '海淀区');
        }();

        this.geocoder  = new google.maps.Geocoder();
        var myOptions = {
            zoom: 10, //区域 深度
            //mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.map  = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //创建地图
    };

    GoolMap.prototype.init = function () {
        var _this = this;
        $.ajax({
            url: 'http://www.chinaaris.com:80/form/list',
            type: 'POST',
            data: {
                "formId": "d7d6d1260ca44277a10d1755cc451ff4", /*  d7d6d1260ca44277a10d1755cc451ff4 */
                "showCount": 1000//每页显示条数
            },
            dataType: "json",
            success: function (data) {
                if (data.data == null) {
                    return false;
                }
                var num = data.data.recordData.length;
                $(data.data.recordData).each(function (i) {
                    var addres = {};
                    if (this[4].name == null || this[4].name == '' || this[4].name == undefined) {
                    } else {
                        addres.description = "<h3>" + this[1].name + "店</h3>地址:" + this[3].name;
                        addres.latlng = new google.maps.LatLng(this[4].name.split(",")[1] / 1, this[4].name.split(",")[0] / 1);
                        addres.longitude = this[4].name.split(",")[1] / 1;
                        addres.latitude = this[4].name.split(",")[0] / 1;
                        addres.seq = "";
                        addres.area = "";
                        addres.nationFlag = "";
                        addres.marker = null;
                        addres.visible = true;
                        addres.mapType = "";
                        addres.tempdescription = "";
                        _this.datas.push(addres);
                    }
                });
                _this.initialize();
            }
        });
    };

    GoolMap.prototype.attachMarkerClick = function(item){
        //console.log(item);

        try {
            var _this = this;
            google.maps.event.addListener(_this.mapData[item].marker, "click", function () {

                _this.infoWindow.setContent(_this.mapData[item].description);
                var defaultMapPos = new google.maps.LatLng(_this.mapData[item].latitude, _this.mapData[item].longitude);
                //console.log(defaultMapPos)
                _this.map.panTo(defaultMapPos);
                _this.map.setZoom(15);
                _this.infoWindow.open(_this.map, _this.mapData[item].marker);
                _this.map.setCenter(_this.mapData[item].marker.getPosition());
            });
        } catch (e) {
        }
    };
    GoolMap.prototype.initialize = function() {


        // var map = new google.maps.Map(document.getElementById("map_canvas"), {
        //     center: new google.maps.LatLng(47.61679190,-122.20208340),
        //     zoom: 10,
        //     //mapTypeId: google.maps.MapTypeId.ROADMAP
        // });

        // return;
        try {
             var _this = this;

                //控制地图的缩放级别
            google.maps.event.addListener(_this.map, 'zoom_changed', function () {
                if (_this.map.getZoom() < 2) _this.map.setZoom(2);
            });
            var myHtml = "";
            _this.infoWindow = new google.maps.InfoWindow({
                "maxWidth": 500,
                content: myHtml
            });
            _this.infoWindow.setContent(myHtml);

            _this.mapData = new Array();
            _this.mapData = _this.datas;
            console.log(_this.datas);
            for (var n = 0; n < _this.datas.length; n++) {
                (function (n) {
                    //console.log(mapData,n);
                    _this.mapData[n].marker = new google.maps.Marker({
                        map: _this.map,
                        visible: _this.mapData[n].visible,
                        position: _this.mapData[n].latlng /*,icon:icon_file*/
                    });
                    _this.mapData[n].marker.setTitle(_this.mapData[n].title);
                    _this.attachMarkerClick(n);
                })(n);
            }
            var liCounts = 0;
            for (var i = 0; i <_this.mapData.length; i++) {
                liCounts++;
                _this.map.panTo(_this.mapData[i].latlng);
                _this.map.setZoom(6);
                _this.mapData[i].marker.setMap(_this.map);
            }
        } catch (e) {
        }
    };
    GoolMap.prototype.changeMap = function() {
        var _this = this;
        _this.datas = [];
        var province = $("#province").val();
        var district = $("#district").val().substring(0, 2);
        var city = $("#city").val().substring(0, 2);



        $.ajax({
            url: 'http://www.chinaaris.com:80/customformsubmit/search',
            type: 'POST',
            data: {
                "formId": "d7d6d1260ca44277a10d1755cc451ff4", /*  d7d6d1260ca44277a10d1755cc451ff4 */
                "showCount": 1000,//每页显示条数
                "condition": province
            },
            dataType: "json",
            success: function (data) {

                if (data.data == null || data.data.recordData == null) {
                    layer.msg('没有查询到任何店铺');
                    return false;
                }
                $(data.data.recordData).each(function (i) {
                    var addres = {};
                    if (this[4].name == null || this[4].name == '' || this[4].name == undefined) {
                    } else {
                        addres.description = "<h3>" + this[1].name + "店</h3>地址:" + this[3].name;
                        addres.latlng = new google.maps.LatLng(this[4].name.split(",")[1] / 1, this[4].name.split(",")[0] / 1);
                        addres.longitude = this[4].name.split(",")[1] / 1;
                        addres.latitude = this[4].name.split(",")[0] / 1;
                        addres.seq = "";
                        addres.area = "";
                        addres.nationFlag = "";
                        addres.marker = null;
                        addres.visible = true;
                        addres.mapType = "";
                        addres.tempdescription = "";
                        if (this[3].name.match(district)) {
                            _this.datas.push(addres);
                        }
                    }
                });
                if (_this.datas.length == 0) {
                    layer.msg('没有查询到任何店铺!');
                    return;
                }

                _this.initialize();
            }
        });
    };
            $('#mapSearch').on('click', function () {
            var district = $("#queryName").val().substring(0, 2);
            if (goolMap.mapData != null) {
                for (var i = 0; i < goolMap.mapData.length; i++) {
                    goolMap.mapData[i].marker.setMap(null);
                }
            }
            goolMap.changeMap(district);
        });

        $("#district").change(function () {
            goolMap.changeMap();
            if (goolMap.mapData != null) {
                for (var i = 0; i < goolMap.mapData.length; i++) {
                    goolMap.mapData[i].marker.setMap(null);
                }
            }
        });
        goolMap.init();复制代码
Vue对高德地图2.0的封装使用
liyoro的专栏
08-20 2464
在Vue项目里使用高德地图，网上有几个比较好用的，例如 AMap-Vue ，文档很好，但不开源 vue-amap ，文档让人流泪 懒人和需求不复杂的，可以直接使用上面的。上面两开源的已经不太活跃了，用的不放心。有些地图的高级功能，用起来特麻烦。所以，抛开第三方，封装自己的地图组件。 需求 组件按需引入。个人喜欢代码干干净净，只要项目需要的功能就行了 简单的封装下，方便直接按官方文档使用需要的功能，方便复用 基于 Vue2，AMap 2.0，AMapUI 1.1 知识点 Vue插槽 slot，方便在
openlayers 地图组件封装
收集、分享
10-27 1246
openlayers 地图组件封装
百度地图封装
02-03
MVC封装了百度地图功能。
封装好的地图
WNEHIUZHNAG的博客
12-09 1627
在.h中 @property (nonatomic , copy)NSString *passProvince;//传递生辉的字符串 在.m中 #import &amp;amp;lt;MapKit/MapKit.h&amp;amp;gt; #import &amp;amp;lt;CoreLocation/CoreLocation.h&amp;amp;gt; @interface mapViewController ()&amp;amp;lt;CLLocati
集成地图的封装隔离
kangpp的博客
01-29 533
目的：     将第三方地图隔离，与项目代码解耦和，实现项目内各地图（百度、高德等）的快捷切换。 思路：     （1）集成百度地图。     （2）实现百度地图集成设计。     （3）实现百度地图工厂设计。     （4）实现工厂管理。     （5）配置文件实现一键切换 1、集成百度地图     查看文档配置SDK
Map封装，方便以后直接调用
xiao_lxl的专栏
01-19 2727
Map封装，方便以后直接调用 MyMap.h//#ifdef MYMAP_H //#define MYMAP_H #include #include #include using namespace std; class MyMapClass { public: //构造函数 MyMapClass(); //析构函数 ~MyMapClass(); //设置数据 bool
高德地图JavaScript接口封装及使用教程
在高德地图API的使用中，常用的方法如创建地图实例、添加标记、绘制路线等可以被封装成单独的函数，以便在需要的时候直接调用。 3. JavaScript与地图API的交互： JavaScript是实现前端地图功能的主要编程语言。...
百度地图javascript API + 调用封装javascript
08-05
"源码"指的是可能提供了示例代码或完整的封装库，用户可以参考或直接使用这部分代码来实现类似功能。"工具"可能意味着这个封装后的API可以作为一个开发工具，帮助开发者快速构建地图相关的应用。 **内容详解：** ...
基于 React 封装的百度地图组件，支持 React Hook，帮助你轻松的接入地图到 React 项目中。.zip
最新发布
01-05
在这个特定的案例中，我们有一个针对百度地图的React组件，它允许开发者通过props传递配置参数，如地图中心点坐标、缩放级别、地图类型等，从而在页面上渲染出地图。 React Hook是React 16.8版本引入的新特性，它...
谷歌地图操作封装类（包含测距，计算面积、弹框以及google地图的一些常用操作）
08-28
谷歌地图操作封装类（包含测距，计算面积、弹框以及google地图的一些常用操作）
谷歌地图 delphi 封装库 2013 0.1.9 全面支持google maps api
03-21
一个老外（西班牙）编写的控件，封装了全部google maps api ，使用在DELPHI中使用谷歌地图变得非常简单 GMLib - Google Maps Library Send suggestions to gmlib@cadetill.com Supported Delphi version: Delphi 6, 7, 2007, 2010, XE2, XE3 Tested Windows Versions: XP, 2003, Vista, 7 Change History january 14, 2013 - Google Maps Library v0.1.9 - Improvement: Compatible with FMX framework. - Improvement: About all Geometry Library coded. - bug fixed: Some bugs fixes. - Attempt to do compatible with DCEF components. October 05, 2012 - Google Maps Library v0.1.8 - Improvement: Compiled under XE3 - Improvement: new component added, the TGMElevation. - bug fixed: General -> fixed all memory leaks found - bug fixed: TGMDirection -> the OnDirectionsChanged event was not triggered - Improvement: TBasePolyline -> class TLinePoints and TLinePoint is disassociated from TPolyline and they are transferred to GMClasses - Improvement: TBasePolyline -> implements ILinePoint interface September 11, 2012 - Google Maps Library v0.1.7 - bug fixed: some memory leaks fixed (there is still some) (thanks Donovan) - Improvement: TGMCircle -> modified all Set and ShowElements methods to use the new method ChangeProperties inherited from TLinkedComponent - Improvement: GMFunctions -> added new functions of transformation types - Improvement: TGMGeoCode-> added boolean property PaintMarkerFound. To true, all markers are automatically generated (if a TGMMarker is linked) (by Luis Joaquin Sencion) - Improvement: TGMGeoCode-> generated URL is encoded in UTF8 to avoid problems with special characters (? accents, ....) - Improvement: TGMMap.TNonVisualProp -> added MapMarker property. True if Map Maker tiles should be used instead of regular tiles. - Improvement: TLatLngEvent -> the events of this type now have a new parametre, X and Y, of Real type, with information of point (X,Y) - Improvement: TLinkedComponent -> added ShowInfoWinMouseOver boolean property. If true, show the InfoWindows when mouse is over the object. Now
简易封装百度地图API
10-11
这个zip解压后会有三个文件，除jquery文件，另两个的源码都有。是调用百度地图的api写的一个小工具，对ip地址没有限制的，在web开发中都可以直接调用。js文件是地图的生成。demo实例，可以看出调用。有详细的注释
封装好的百度地图API（有最完善的使用示例）
11-12
地图展示 异步加载地图 同时加载两个地图 通过城市名设置中心(不支持) 设置地图最大、最小级别 移动地图（北京到广州） 缩放地图 拖曳地图 设置地图显示范围 获取地图显示范围 获取两点间的距离 地图控件示例 添加删除工具条、比例尺 添加删除地图类型、缩略图控件 添加第三方版权控件 添加自定义控件 覆盖物示例 添加删除覆盖物 设置点的弹跳动画 设置点的新图标 设置点是否可拖曳 设置线面可编辑 设置覆盖物显示隐藏 添加文字标签 设置覆盖物文字标签 获取覆盖物信息 添加多个点示例 从多个点中删除特定的点 绘制闪烁点 绘制海量的点 绘制编辑弧线 绘制椭圆 添加自定义覆盖物 点聚合 热力图 矢量图 信息窗口示例 纯文本信息窗口 图文组合的信息窗口 给多个点添加信息窗口 获得信息窗口的内容 右键菜单示例 地图添加右键菜单 覆盖物右键菜单 鼠标示例 鼠标拉框放大地图 鼠标点击拾取坐标 事件示例 地图加载完成 地图单击事件 覆盖物注册事件 传递事件参数 多个点注册事件 个性化 设置地图模板样式
谷歌百度地图api帮助文档
04-06
NULL 博文链接：https://z-one.iteye.com/blog/1557872
google地图的简易封装（一）
hanqing
11-26 1807
以下经测试通过： New Document var apply = function(base,expand){//用于copy属性 for(var key in expand){ base[key] = expand[key]; } }; var MyMap = function(id,map
调用google地图接口 的封装
weixin_34279579的博客
08-21 197
2019独角兽企业重金招聘Python工程师标准>>> ...
地图 工具类、封装的一些方法等
Hao、
03-15 500
package com.up72.football.utils; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.support.annotati...
百度地图封装mixins
微不足道的小博
06-26 1268
2、封装基本对象 2.1 set 2.1.1 Point 2.1.2 Icon 2.1.3 Marker 2.1.4 WindowInfo 2.1.5 Label 2.2 add 单独封装图形（基于set方法）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值