initMap: function () {var me = this;var map = new BMap.Map(me.gisBaiduMap);//在百度地图容器中创建一个地图//创建和初始化地图函数:createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件//创建地图函数:function createMap() {var point = new BMap.Point(121.607973,31.18491);//定义一个中心点坐标map.centerAndZoom(point, 11);//设定地图的中心点和坐标并将地图显示在地图容器中me.myMap = map;//将map变量存储在当前Controller全局中
        }//地图事件设置函数:function setMapEvent() {map.enableDragging();//启用地图拖拽事件,默认启用(可不写)map.enableScrollWheelZoom();//启用地图滚轮放大缩小map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)map.enableKeyboard();//启用键盘上下左右键移动地图
        }//地图控件添加函数:function addMapControl() {//向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrl_nav);//向地图中添加缩略图控件var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});map.addControl(ctrl_ove);//向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);}},//添加事件监听mapAddEventListener: function () {var me = this;me.myMap.removeOverlay(me.addMarker);var clickEvent = function (e) {if (me.view.getUIStatus() != "VIEW") {me.view.getCmp("editPanel->longitude").sotValue(e.point.lng);me.view.getCmp("editPanel->latitude").sotValue(e.point.lat);var point = new BMap.Point(e.point.lng, e.point.lat); //将标注点转化成地图上的点//
                var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {offset: new BMap.Size(10, 25), // 指定定位位置imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                });me.myMap.removeOverlay(me.addMarker);me.addMarker = new BMap.Marker(point, {icon: myIcon}); //将点转化成标注点me.myMap.addOverlay(me.addMarker);  //将标注点添加到地图上
            }}me.myMap.addEventListener("click", clickEvent);},//查看数据时定位positionMap: function (retData) {var me = this;if (retData.longitude) {var bdLng = retData.longitude;var bdLat = retData.latitude;var point = new BMap.Point(bdLng, bdLat); //将标注点转化成地图上的点var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {offset: new BMap.Size(10, 25), // 指定定位位置imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
            });me.addMarker = new BMap.Marker(point, {icon: myIcon}); //将点转化成标注点
me.myMap.addOverlay(me.addMarker);  //将标注点添加到地图上
me.myMap.centerAndZoom(point, 13);}},//描绘省份轮廓线addSCBorder:function () {var blist = [];/*** 添加行政区划* @param {} districtName 行政区划名* @returns  无返回值*/function addDistrict(districtName) {var me = this;//使用计数器来控制加载过程//使用百度接口加载边界经纬度数据var bdary = new BMap.Boundary();bdary.get(districtName, function (rs) {       //获取行政区域blist.push({points: rs.boundaries[0], name: districtName});drawBoundary();});}function drawBoundary() {//包含所有区域的点数组var pointArray = [];/*画遮蔽层的相关方法*思路: 首先在中国地图最外画一圈,圈住理论上所有的中国领土,然后再将每个闭合区域合并进来,并全部连到西北角。*      这样就做出了一个经过多次西北角的闭合多边形*///定义中国东南西北端点,作为第一层var pNW = {lat: 59.0, lng: 73.0};var pNE = {lat: 59.0, lng: 136.0};var pSE = {lat: 3.0, lng: 136.0};var pSW = {lat: 3.0, lng: 73.0};//向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点var pArray = [];pArray.push(pNW);pArray.push(pSW);pArray.push(pSE);pArray.push(pNE);pArray.push(pNW);//循环添加各闭合区域//添加显示用标签层var label = new BMap.Label(blist[0].name, {offset: new BMap.Size(20, -10)});label.hide();map.addOverlay(label);//添加多边形层并显示var ply = new BMap.Polygon(blist[0].points, {strokeWeight: 2,strokeColor: "#FF0000",fillOpacity: 0.01,fillColor: " #FFFFFF"}); //建立多边形覆盖物ply.name = blist[0].name;ply.label = label;ply.Type = "Border";map.addOverlay(ply);//将点增加到视野范围内var path = ply.getPath();pointArray = pointArray.concat(path);//将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点pArray = pArray.concat(path);pArray.push(pArray[0]);//限定显示区域,需要引用api库try {map.setViewport(pointArray);    //调整视野} catch (err) {console.log(err)}//添加遮蔽层var plyall = new BMap.Polygon(pArray, {strokeOpacity: 0.0000001,strokeColor: "#04121b",strokeWeight: 0.00001,fillColor: "#04121b",fillOpacity: 0.7}); //建立多边形覆盖物plyall.Type = "Border";map.addOverlay(plyall);}addDistrict("上海市浦东新区")},

转载于:https://www.cnblogs.com/wcnwcn/p/9961689.html

百度地图 显示,定位,轮廓图相关推荐

  1. 安卓百度地图之定位图标在地图上显示

    此文章接上一篇文件:安卓百度地图之定位_zpon_wangxuan的博客-CSDN博客,对于地图上显示定位图标就是在地图上添加一个地图的marker就可以了: 布局文件代码: <LinearLa ...

  2. android百度地图sdk定位权限,Android:使用百度地图SDK实现定位:下载SDK、申请密钥、动态获得Android权限...

    最近想实现一个打卡的功能,想到可以利用百度地图的SDK.网上有很多关于百度地图SDK定位.地图功能应用的demo,这部分倒不是很困难.但网上很多博客写的内容一般都着重于代码部分,很多下载配置和编译器设 ...

  3. 【Springboot】集成百度地图实现定位打卡功能

    目录 第一章 需求分析 第二章 概要设计 第三章 详细设计 3.1 环境搭建 3.1.1 获取百度地图ak 3.1.2 创建springboot项目 3.2 配置application.propert ...

  4. android 百度地图拖动定位,百度地图获取定位,实现拖动marker定位,返回具体的位置名...

    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...

  5. android百度地图更换定位图标,android百度地图定位,改变MyLocationOverlay默认图标(原始为蓝色点)(两种方法)...

    开放地图API无外乎google ,百度,高德等.其它的还有很多,不过比较好用的就这三种了,如果不需要出国(台湾例外),则最好使用百度地图,性能比高德好的多,无聊的时候自己可以测试测试.. 下面我简单 ...

  6. 基于ECharts+百度地图开发散点扩散图

    基于ECharts+百度地图开发散点扩散图 用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件 下载地址为:http://echarts.bai ...

  7. 利用百度地图Android定位SDK获取经纬度

    环境的搭建(参考上一次的文章) 百度地图Android定位SDK的使用 2.在Android studio里设计程序来获取经纬度 界面布局activity_main.xml文件的源代码: <?x ...

  8. Android百度地图之定位图层

    来自:http://blog.csdn.net/u010142437/article/details/11577077 在使用百度地图结合GPS进行定位一文中,我们已经介绍了利用GPS结合百度地图进行 ...

  9. 关于开发百度地图的定位以及导航的代码记录

    因为年前的工作中用到了百度地图的定位 导航功能,然后又去翻阅了百度sdk相关的api后进行开发,现在对其进行一些整理,方便后面遇到相关开发时使用. 开发之前,先进行准备工作,在百度地图的开发者网站上下 ...

  10. springboot使用百度地图IP定位API进行定位

    springboot使用百度地图IP定位API进行定位 一.申请开发者密钥(AK) 二.在springboot中调用百度地图的API 1.新建一个接口类 2.在controller层调用此接口 对返回 ...

最新文章

  1. MySQL流程控制函数
  2. 一个发送短信验证码 然后倒计时实例
  3. python -- leetcode 刷题之路
  4. 坑 之 TypeError: List of Tensors when single Tensor expected
  5. SAP Spartacus 的 Above-the-Fold Loading 加载机制
  6. linux下解压.tar.bz2文件
  7. 产品经验谈:一文讲清楚商业模式梳理怎么做?
  8. 还是畅通工程1233
  9. socket编程(一)
  10. 【毕业设计】java银行帐目管理系统(源代码+论文)
  11. [译]Ocelot - Headers Transformation
  12. 问题十六:使用初始化列表的构造函数和使用函数体的构造函数有什么区别?
  13. RK3288_Android7.1添加两个gpio的按键
  14. JQuery语法,选择器和事件
  15. 【持续更新】Java序列化对象释疑
  16. php cas 票据认证失败,解决CAS客户端验证ST票据时发生的TicketValidationException问题...
  17. 为什么低通滤波器的作用相当于积分器
  18. 一年代码功能点的创新性怎么写_项目创新点怎么写
  19. Swift之Attempting to badge the application icon but haven't received permission from the user to badg
  20. Ecshop系统二次开发教程及流程演示

热门文章

  1. 【微信小程序】小程序开发—node.js下载,npm配置以及组件使用
  2. 前端面试 --数据结构与算法篇
  3. 【VMware vSAN 7.0】2.5 许可证要求 —我们有软硬件解决方案
  4. vr全景创业靠不靠谱,vr全景业务好不好做
  5. Java中的反射(Reflection)为什么叫“反射”?什么是“正射”?如何自定义注解并解析?
  6. IDEA如何设置启动参数,环境变量
  7. linux下使用C获取mp3 ID3数据时的一些注意事项(v1,v2.3,v2.4)
  8. 将VS打包生成安装文件
  9. linux安装spark安装(详解版-单机/伪分布)
  10. 个人网站模板颜色搭配技巧