百度地图生成器,图标消失,中文乱码和自定义名字undefind
2024-05-10 08:58:44
图标消失是原icon图片没有了,手动把
new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png"
/*修改为*/
new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png" 中文乱码是因为生成的网页代码中,charset设置成gbk了，手动把
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
/*修改为*/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">自定义名字undefind是因为生成的代码有个错误，手动把69行左右的代码
var label = new BMap.Label(json.titlea,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
/*修改为*/
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
/*注意没titlea改成title*/ 完整的代码如下：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">html,body{margin:0;padding:0;}.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head><body><!--百度地图容器--><div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">//创建和初始化地图函数：function initMap(){createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addMarker();//向地图中添加marker}//创建地图函数：function createMap(){var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图var point = new BMap.Point(115.77454,33.809094);//定义一个中心点坐标map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中window.map = map;//将map变量存储在全局}//地图事件设置函数：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);}//标注点数组var markerArr = [{title:"亳州学院",content:"地址：安徽省亳州市",point:"115.774073|33.809094",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}];//创建markerfunction addMarker(){for(var i=0;i<markerArr.length;i++){var json = markerArr[i];var p0 = json.point.split("|")[0];var p1 = json.point.split("|")[1];var point = new BMap.Point(p0,p1);var iconImg = createIcon(json.icon);var marker = new BMap.Marker(point,{icon:iconImg});var iw = createInfoWindow(i);var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});marker.setLabel(label);map.addOverlay(marker);label.setStyle({borderColor:"#808080",color:"#333",cursor:"pointer"});(function(){var index = i;var _iw = createInfoWindow(i);var _marker = marker;_marker.addEventListener("click",function(){this.openInfoWindow(_iw);});_iw.addEventListener("open",function(){_marker.getLabel().hide();})_iw.addEventListener("close",function(){_marker.getLabel().show();})label.addEventListener("click",function(){_marker.openInfoWindow(_iw);})if(!!json.isOpen){label.hide();_marker.openInfoWindow(_iw);}})()}}//创建InfoWindowfunction createInfoWindow(i){var json = markerArr[i];var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");return iw;}//创建一个Iconfunction createIcon(json){var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})return icon;}initMap();//创建和初始化地图
</script>
</html>
百度地图生成器,图标消失,中文乱码和自定义名字undefind相关推荐
- 百度地图生成器添加标注不显示
最近发现百度地图生成器生成的地图中标注的图片不显示,如下图: 很明显了,就是这个图标路径(http://app.baidu.com/map/images/us_mk_icon.png)的问题 在生成的 ...
- 百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果 上次写的是添加自 ...
- 让百度地图生成器里的“标注”内容展开--解决方案
这篇文章简单的讲:直接复制文章里的"完整代码", 修改[坐标]和[公司信息]就完事了 代码 如果你用我写的代码,需要知道下面2个 百度地图生成器:http://api.map.ba ...
- 百度地图生成器里的标注内容默认展开
百度地图生成器: http://api.map.baidu.com/lbsapi/createmap/index.html 百度地图拾取坐标系统: http://api.map.baidu.com/l ...
- sns.distplot图例标注怎么添加_百度地图API图标、文本、图例与连线
百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...
- 百度地图标注图标太小
1.1.1 现象 百度地图中,定位点的标注示意图标太小: 实际期望的图标是这样的: 1.1.2 原因 检查了很久,以为是打开地图时的设置问题,后来慢慢查找地图上的元素定位,终于发现原来这个图标大小 ...
- java调用百度地图API依据地理位置中文获取经纬度
百度地图api提供了非常多地图相关的免费接口,有利于地理位置相关的开发,百度地图api首页:http://developer.baidu.com/map/. 博主使用过依据地理依据地理位置中文获取经纬 ...
- python爬虫爬取百度存成html出现中文乱码情况
写的爬虫代码爬取百度页面,存成txt格式的或者直接输出下面代码都是正常的,不会出现乱码情况,但是一旦存成html之后打开就出现中文乱码. from urllib.request import urlo ...
- 隐藏百度地图logo图标
//隐藏百度地图图标 .BMap_stdMpPan,.BMap_stdMpZoom .BMap_button,.BMap_stdMpSliderBgTop, .BMap_stdMpSliderBar, ...
- 百度地图设置图标方向（滴滴打车 小汽车在地图转弯是怎么做到的）
百度地图如何将添加好的marker设置方向呢? 在生活中遇到很多相关的场景,比如滴滴出行App,可以看到车辆在地图上行驶的方向. 在百度地图javascriptAPI里面的marker类中属性的第二个 ...
最新文章
- 2013大数据全球技术峰会观后感
- Quartz + spring 定时任务常见错误总结
- Online ML那点事-!
- Java的IO：BIO | NIO | AIO
- python脚本绘图_python实现画图工具
- 加州“电力十足 ” iPhone12加速贬值成全“十三香”
- 【MySQL】MySQL Shell 简介与使用
- 学习GNU Make (1)(转)
- WinServer2012 R2忘记密码的解决方案+远程连接另一种莫名其妙故障
- Hadoop、Zookeeper、Hbase分布式安装教程
- 哪些思维方式是你刻意训练过的？
- Linux系统版本介绍
- 单列通栏布局版式示意HTML,整体布局2——页面排版布局
- 关于苹果开发证书、发布证书、开发推送证书、发布推送证书的申请
- RadioButton下划线效果的使用
- 【Io开发笔记】机智云智能浇花器实战(3)-自动生成代码移植
- XSS-labs通关游戏
- 【★】IT界8大恐怖预言
- 使用visio创建跨职能流程图
- iphone7plus计算机,iPhone 7 Plus和iPhone 8 Plus的区别-太平洋电脑网