精华内容
下载资源
问答
  • 百度地图自定义标注

    2013-07-05 17:34:00
    实现了百度地图自定义标注,标注可以定义自己想要的图片。达到了和百度marker点击后弹出信息窗口的效果,里面有例子,和相应的图片共大家学习。
  • jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码。
  • 百度地图自定义标注点 //创建点 var point = new BMap.Point(109.49926175379778, 36.60449676862417); //创建自定义标 //参数1:自定义的图片的路径 //参数2:需要显示的像素大小,例子中图片大小为200*200,所以...

    百度地图自定义标注点

    //创建点
    var point = new BMap.Point(109.49926175379778, 36.60449676862417);
    //创建自定义标
    //参数1:自定义的图片的路径
    //参数2:需要显示的像素大小,例子中图片大小为200*200,所以显示Size(200,200)
    //参数3:偏移量,距离中心点的偏移量,如(0,0) 表示 图片左上角顶点在点的中心,(100,100)表示图片的中心在点的中心,(100,200)表示 图片底边中点在点的中心
    var icon = new BMap.Icon(require("@/assets/logo.png"),new BMap.Size(200,200),{anchor: new BMap.Size(100, 200)};
    // 创建标注 参数1 点 参数2 自定义icon
    var marker = new BMap.Marker(point,{icon:icon});
    map.addOverlay(marker); // 将标注添加到地图中
    
    展开全文
  • vue项目,百度地图自定义标注marker

    千次阅读 2020-11-09 16:16:45
    vue项目,百度地图自定义标注marker 1、向地图中添加标注 如下示例,向地图中心点添加了一个标注,并使用默认的标注样式: var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point)...

    vue项目,百度地图自定义标注marker

    1、向地图中添加标注

    如下示例,向地图中心点添加了一个标注,并使用默认的标注样式:

    var point = new BMapGL.Point(116.404, 39.915);   
    var marker = new BMapGL.Marker(point);        // 创建标注   
    map.addOverlay(marker);                     // 将标注添加到地图中
    

    2、向地图中添加标注

    定义标注图标 通过Icon类可实现自定义标注的图标
    重点:vue项目中,以import的方式导入图片文件!!!
    如:import drugMarkerIcon from ‘@/assets/map/drug_mark_icon@2x.png’ // 以import的方式导入图片文件

    var point = new BMapGL.Point(116.404, 39.915)   
    var myIcon = new BMapGL.Icon(drugMarkerIcon, new BMapGL.Size(28, 34)) 
    var marker = new BMapGL.Marker(point, { icon: myIcon }) // 创建标注   
    this.map.addOverlay(marker) // 将标注添加到地图中
    marker.addEventListener('click', function () { //监听标注点击事件
      alert('您点击了标注')   
    })
    
    
    展开全文
  • icon: { // 选填--自定义icon图标 url: "img/icon.png", width: 36, height: 36 } }); Jquery是网页编程所需的重要技术之一。Jquery是继prototype之后又一个优秀的Javascrīpt框架,它是轻量级的js库...
  • 一款支持鼠标自由拖拽图片位置的jQuery图片随意拖动排列代码,点击图片展开文字介绍效果。
  • jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码。new BaiduMap({id: "container2",title: {text: "北京故宫博物院",className: "title"/ 选填--样式类名},content: {...

    jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码。

    new BaiduMap({

    id: "container2",

    title: {

    text: "北京故宫博物院",

    className: "title"/ 选填--样式类名

    },

    content: {

    className: "content",// 选填--样式类名

    text: ["地址:北京市东城区东华门大街", "电话:(010)65131892"]

    },

    point: {

    lng: "116.412222",

    lat: "39.912345"

    },

    level: 15,// 选填--地图级别--(默认15)

    type: true,// 选填--是否显示地图类型--(默认false)

    width: 320,// 选填--信息窗口width--(默认自动调整)

    height: 70,// 选填--信息窗口height--(默认自动调整)

    icon: { // 选填--自定义icon图标

    url: "img/icon.png",

    width: 36,

    height: 36

    }

    });

    Jquery是网页编程所需的重要技术之一。Jquery是继prototype之后又一个优秀的Javascrīpt框架,它是轻量级的js库,它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

    申明:php中文网下载站匠心打造专业的IT资源下载站!一切资源免费,来源网络收集,请自行检测软件的完整性。交流QQ群:916808767

    展开全文
  • 百度地图自定义标注样式

    千次阅读 2019-10-11 17:39:55
    // 百度地图marker样式 let icon1 = new BMap.Icon(require('../src/assets/nationMap/marker1.png'), new BMap.Size(20, 60), { anchor: new BMap.Size(10, 36), // 设置图片偏移,类似于剪切图片的功能 image...

    实现效果图

    标注样式的自定义

    // 百度地图marker样式
    let icon1 = new BMap.Icon(require('../src/assets/nationMap/marker1.png'), new BMap.Size(20, 60), {
    //当标注显示在地图上时,其所指向的地理位置距离图标左上角各偏移10像素和36像素
      anchor: new BMap.Size(10, 36),
      // 设置图片偏移,类似于剪切图片的功能
      imageOffset: new BMap.Size(0, 0)
    })
    

    通过new BMap.Size(20, 60)来限定标注的尺寸,这里我的标注是竖直的,我定义标注的宽度20px,高度60px,实际上我只用到来宽度来限制标注的尺寸,这里标注的宽度就是20px,由于高度60px比标注实际的高度要大,所以并不起作用

    这里需要注意的地方就是
    require('../src/assets/nationMap/marker1.png')
    图片在Vue中需要用到require来获取

    自己对于imageOffset: new BMap.Size(0, 0)的理解,当你的图片是一个大图的时候,意思就是说当你使用含有多个标注点样式的大图时,但是我们需要的只有一个标注点样式,这个时候我们就要用到剪切,imageOffset: new BMap.Size(100, 100)确定了剪切点的左上方的坐标,比如imageOffset: new BMap.Size(100, 100)对应于图片中就是margin-left:100pxmargin-top:100px

    添加标注

    // 添加单个标注
    // icon: this.GLOBAL.icon1,这里面的this.GLOBAL.icon1就是上面自己定义的标注样式
     markerFun: function (map, point) {
          let marker = new BMap.Marker(point, {
            icon: this.GLOBAL.icon1
          })
          map.addOverlay(marker)
        },
        // 添加多个标注
        multMarker: function () {
          for (let i = 0; i < this.siteList.length; i++) {
            // 创建坐标点
            let points = new BMap.Point(this.siteList[i].position.lng, this.siteList[i].position.lat)
            this.markerFun(this.GLOBAL.map, points)
          }
        }
    
    展开全文
  • 百度地图自定义标注标记

    千次阅读 2014-03-16 22:24:12
    一、引入:  二、将一个div放在form里面作为地图的容器  form, html, #allmap  {  width: 100%;  height: 100%;  overflow: hidden;  margin: 0;  }  
  • 百度地图自定义标注图片偏差问题

    千次阅读 2018-07-10 16:08:01
    原因:地图大小发生变化时,自定义标注的图片大小不变,导致偏离位置发生, 尤其当标注的图片设置的图片大小越大时发生偏移越大 解决方案:尽可能减小标注图片的大小: new BMap.Size(28, 28) var pointIcon = ...
  • 2.定义自定义覆盖物 var map = new BMap.Map("container"); var point = new BMap.Point(116.490,39.543); map.centerAndZoom(point,15); // 定义自定义覆盖物的构造函数 function SquareOverlay(center, ...
  • 实现了如下功能: 1、将红色大头针更换成客户自定义的图片 2、解决了缩放地图时气泡view也弹出对 bug
  • //禁止标注地图上拖动 annotationView.annotation = cluster; // annotationView.image=[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:annotation.subtitle]]]; ...
  • map.html 地图页面 <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link ...
  • //禁止标注地图上拖动  annotationView.annotation = cluster; // annotationView.image=[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:annotation.subtitle]]];  ...
  • <html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>修改地图配置</title> <script type="text/javascript" src="http://api.map...
  •  最近做百度地图的图形化定制。略有心得,在此和大家分享一下,少走弯路。先看目录,大致介绍一下都写了些啥。我会从最基本的来,一点点往下写,同志们可以看目录自己去找需要的部分。ps:注意,我用的是百度地图 ...
  • 此代码详细描述如何调用百度地图api生成自己想要的自定义标注代码、自定义图标或者自定义覆盖物,以及标注拖动、添加文本信息和获取当前经纬度。
  • 百度地图API 自定义标注图标

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,091
精华内容 1,636
关键字:

百度地图自定义标注