marker = new BMap.Marker(pointList[i]) marker.setLabel(getNumberLabel(i)); function getNumberLabel(number) { var offsetSize = new BMap.Size(0, 0); var labelStyle = { color: "#fff", backgroundColor: "0.05", border: "0" }; //不同…
1.html 页面引入 相关js public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-sc…
百度地图-修改marker图标(icon) 学习了:https://blog.csdn.net/clh604/article/details/9412291/ 源码膜拜: var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.addContr…
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>MyFirstBaiduMap</title> <script type="text/javascript" src="http://api.map.baidu.com/api?key=32ce2…
https的网站使用百度地图,如果你引用的地址没写对的话,加载不出来百度地图,被认为是不安全的JS内容. https://api.map.baidu.com/api?+你的秘钥+&s=1 应该就可以解决了. 一切问题都是有解的,请一直google下去吧.…
遇到的坑:使用百度地图,当地图缩小时,marker点的自定义图标会出现偏移的问题,marker点的信息窗口会出现闪烁问题. 原因:1.anchor是定位点距离图片左上角的偏移量.如果不给anchor的话,API会自动获取图片中心点作为anchor位置. 2.infoWindowAnchor属性,它是用来控制信息窗口开启的位置的(注意这里调用的是Marker的openInfoWindow方法,而不是Map的openInfoWindow方法),默认情况下它和icon的anchor是一个位置 因为ma…
最近一直和百度地图打交道,写几篇博客记录一下吧,目前最新版是4.0的 ,之前我用的是3.7的, 就以4.0的为例说一下最基本的配置流程吧. 一.准备工作 1.申请一个百度地图开发者账户--地址:https://passport.baidu.com/v2/?reg&regType=1&tpl=mn&u=http://lbsyun.baidu.com/ 2.申请一个应用--地址:http://lbsyun.baidu.com/apiconsole/key 申请应用需要用到sha1 值和…
-------------------[删除marker]-----------------------------success: function(data){ if(data.length>0){ for(var i=0;i<JSON.parse(data).data.length;i++){ var location=JSON.parse(data).data[i].location; var p1=location.split(",")[0]; var p2=lo…
这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BMap is not defined 我只有一个页面需要用到地图,所以我是使用cdn引入的方式来写的,并没有像网上一些教程一样使用npm引入安装. 直接简单粗暴的根据百度地图api来写,虽然报错.那就解决报错的bug就行了.好了,下面开始说说步骤 在需要页面的处引入cdn: <script type=…
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html 中全局引用. 那在单个vue组件页面中如何引入呢? 刚开始时,是直接通过 DOM 操作方式插入script标签到当前document中,如下: let scriptNode = document.createElement("script"); scriptNode.setAttribu…
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引用. 利用之前博客所写的JavaScript---动态加载script和style样式进行操作,发现如下错误: Failed to execute 'write' on 'Document': It isn't possible to write into a document from an as…
以下代码拷贝成html,直接运行即能看到百度地图 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>百度地图</title> </head> <body> <script type="text/jav…
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> <script> //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加…
引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F2b7da9b79e6a33c4b927285590eef97"></script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo…
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <meta charset="utf…
1.点个数太多导致加载缓慢的解决. 2.可视化区域内加载的解决. 3.自定义信息窗口解决. 4.区域/板块/商圈等的绘制功能解决. 基本包含了用到百度地图API会使用到的大部分常规性场景.(聚合点功能没写,公司暂不需要) 上两份代码. var map = null; var estateResult; var landResult; var myIcon1 = new BMap.Icon("../../Img/marker1.png", new BMap.Size(48, 48));…
功能一:获取map地图窗口的可视区域: var map = new BMap.Map("allmap");            // 创建Map实例 map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);  //初始化时,即可设置中心点和地图缩放级别. var bs = map.getBounds();   //获取可视区域 var bssw = bs.getSouthWest();   //可视区域左下角 var bsne =…
http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=webapi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &…
最近因为工作需要,领导要我将51地图API开发的一个应用迁移到百度地图,或者说用百度地图API进行重写,实现同样的功能.我先是把现有的这个51地图的应用了解了一下,然后就试着用百度地图做一些demo,最后就自己动手参照原来的应用的功能,用百度地图实现了一下.下面就给大家介绍一下,百度地图API开发的一些基础技术. 首先,百度地图API的官方首页是:http://dev.baidu.com/wiki/static/index.htm,上面介绍了很多详细的信息,各种版本的API,成功案例,还有在线帮…
之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如下: 1.依然是要弄个地图自定义控件: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BaiduMap.ascx.cs" Inherits="Web.User…
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delegate() 方法 原文链接http://www.w3school.com.cn/jquery/event_delegate.asp #pop为弹窗容器,#info为弹窗信息 将#info设置成绝对定位信息窗就可以流动了 demo <!DOCTYPE html> <html> <he…
/** * 百度地图使用工具类-v1.5 * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email boonya@sina.com * @company KWT.Shenzhen.Inc.com * @notice 有些功能需要加入外部JS库才能使用,另外还需要申请地图JS key . * 申请地址:http://developer.baidu.com/map/apply-key.htm */ (fun…
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地把全部人员的地理位置都显示在地图上. --------------------------------------------------------------------------- 预备知识1.为啥marker数量不能超过300个? 答:由于浏览器能支持的dom元素有限,所以建议不超过该数量…
原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http://hotel.qunar.com/city/beijing_city/#fromDate=2011-07-13&from=qunarHotel&toDate=2011-07-16 -------------------------------------------------------…
原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据.我应该怎么办呢? ------------------------------------------------------------------------------------------ 一.无需数据库,如何建立自己的地理信息表. 如果让初学者去建立数据库,那么意味着大家还要学习数据库,…
原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? --------------------------------------------------------- 一.如果自定义结果面板的样式? 我们通过数据接口拿到每一条数据,然后塞到自己想要的html结构里,如下: )}); mk.setLabel(lb); str += '<li>'+ pInfo…
已经很久没更新博客了,因为最近一直在学习前端的知识,没那么多时间,写博客或者写文章不但没有钱,写得好还好说,如果写得不好,一些吃瓜群众,不仅要喷你,搞不好还要人身攻击就不好了.所以写博客的人,脸皮得厚,像我这样,任凭骂我千百遍,我依旧坚持写,也不怕侮辱了谁的眼睛,哈哈~我发现有些做技术比较厉害的人,多少都有些脾气,你永远不知道他什么时候突然就消失在园子里了...... 在使用百度地图之前,我们要先去百度开放平台申请ak.地址:http://lbsyun.baidu.com/ 填写开发者认证信息,…
效果如下: 1.获取位置的经纬度: 如坐标:114.110033,22.541098 获取经纬度: http://api.map.baidu.com/lbsapi/getpoint/index.html 2.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"…
1.进入百度地图开放平台 http://lbsyun.baidu.com/ 2.进入右上角的   “API控制台” 在这里创建应用 并 获取密钥 3.进入 如下地址 创建地图 http://api.map.baidu.com/lbsapi/creatmap/ 地图创建完成后会自动生成 HTML代码 4.创建完成后的代码 如下所示 (以 北京天安门为例) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &…
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt3GBeFuzNIG9OlnOZ3u4A5H3WcSe5"> </script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/con…