解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)
2024-05-10 02:57:27
问题：1.加载指定经纬度的坐标点怎么都不居中显示，总是显示在左上角，需要在地图加载完后拖动才看到指定的坐标点；2.显示的坐标点图片没有正常显示，后面使用了自定义坐标图片（如图）：
解决后：
参考：
1.百度地图API类：http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB
2.自定义图标这里有：http://blog.csdn.net/chenmoquan/article/details/13631673
3.坐标总是显示在左上角：http://tieba.baidu.com/p/1712879513
4.解决代码参看myIcon=和map.panBy(320, 225)处，也就是标红的2个部分;
页面：/* 百度地图样式 */
#allmap { width: 650px;
height: 450px;
}
<div id="allmap"></div>
js：
/****************************************************
* 加载百度地图
* http://developer.baidu.com/
****************************************************/var map, myIcon; // 地图全局变量，自定义图标名称
// 加载百度地图：商家名称，lng经度，lat纬度，商家详细地址，商家联系电话
function mapBind(mName, lng, lat, address, tel){ // 创建百度地图Map实例
map = new BMap.Map("allmap");
// 逆地址解析
var gc = new BMap.Geocoder();
/**
* 百度地图API接口类：http://developer.baidu.com/map/reference/index.php?title=Class:总类/核心类
* 自定义坐标点指示图标:http://blog.csdn.net/chenmoquan/article/details/13631673
*/
myIcon = new BMap.Icon(objUrl + "/resources/images/detail/myicon.png",
new BMap.Size(20, 30),
{ imageSize: new BMap.Size(20, 30), // 图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性
anchor: new BMap.Size(10, 30), // 图标的定位点相对于图标左上角的偏移值
infoWindowAnchor: new BMap.Size(10, 0) // 信息窗口开启位置相对于图标左上角的偏移值
});
// 初始化地图,设置中心点坐标和地图级别 (new BMap.Point(106.620, 26.648), 13);
//map.centerAndZoom(new BMap.Point(data.C_LONGITUDE, data.C_LATITUDE), 18);
map.enableScrollWheelZoom(true);
// 单击获取点击的经纬度
map.addEventListener('click',function(e){ var pt = e.point;
// 将点击获取的经纬度赋值到控件
$('#txtLng').numberbox('setValue', pt.lng);
$('#txtLat').numberbox('setValue', pt.lat);
map.clearOverlays();
map.centerAndZoom(pt);
map.addOverlay(new BMap.Marker(pt, {icon:myIcon})); //添加标注和自定义图标
// 逆地址解析：将点击获取的经纬度解析为详细地址
gc.getLocation(pt, function(rs){ /* var ac = rs.addressComponents;
$('#txtAddress').textbox('setValue', ac.city +
ac.district + ac.street + ac.streetNumber); */
/* alert(ac.province + ", " + ac.city + ", "
+ ac.district + ", " + ac.street
+ ", " + ac.streetNumber); */
});
});
// 添加地图类型控件
map.addControl(new BMap.MapTypeControl());
// 左上角，添加比例尺
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
// 左上角，添加默认缩放平移控件
map.addControl(new BMap.NavigationControl());
// 右上角，仅包含平移和缩放按钮
/* map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,
type: BMAP_NAVIGATION_CONTROL_SMALL})); */
// 设置地图显示的城市 此项是必须设置的
//map.setCurrentCity("贵阳市");
var point; //存放标注点经纬信息的数组
var marker; //存放标注点对象的数组
var info; //存放提示信息窗口对象的数组
if(lng != '' && lat != ''){ // 坐标点
point = new window.BMap.Point(lng, lat);
// 按照地图点坐标生成标记
marker = new window.BMap.Marker(point, {icon:myIcon});
// 跳动的动画
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
// 创建信息窗口对象
info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>名称：" + mName
+ "</br>地址：" + (address == undefined ? "" : address)
+ "</br> 电话：" + (tel == undefined ? "" : tel ) + "</br></p>");
// 设置坐标的文字标签
var label = new window.BMap.Label(mName, { offset: new window.BMap.Size(20, -10) });
marker.setLabel(label);
// 鼠标移到坐标点显示信息框
marker.addEventListener("mouseover", function () { this.openInfoWindow(info);
});
// 清除地图上的所有覆盖物
map.clearOverlays();
map.centerAndZoom(point, 18);
map.addOverlay(marker);
//map.panTo(point);
map.setCenter(point);
}
// 坐标不居中：http://tieba.baidu.com/p/1049624601
// http://tieba.baidu.com/p/1712879513
var newPt = new BMap.Point(lng, lat);
map.centerAndZoom(newPt, 18);
//map.setCenter(newPt);或者 map.setCenter(new BMap.Point(lng, lat),16);
// 中心点偏移多少像素（width,height）为地图div宽高的1/2;解决不居中问题
map.panBy(320, 225);
// 百度地图关键字提示输入并定位功能
mapDownClick();
}// 百度地图关键字提示输入并定位功能:http://developer.baidu.com/map/jsdemo.htm#a6_2
function mapDownClick(){ // 建立一个自动完成的对象
var ac = new BMap.Autocomplete(
{ "input" : "suggestId",
"location" : map
});
// 鼠标放在下拉列表上的事件
ac.addEventListener("onhighlight", function(e) {
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) { value = _value.province + _value.city
+ _value.district
+ _value.street
+ _value.business;
}
str = "FromItem<br />index = "
+ e.fromitem.index
+ "<br />value = " + value; value = "";
if (e.toitem.index > -1) { _value = e.toitem.value;
value = _value.province + _value.city
+ _value.district
+ _value.street
+ _value.business;
}
str += "<br />ToItem<br />index = "
+ e.toitem.index + "<br />value = "
+ value;
getObj("searchResultPanel").innerHTML = str;
}); // 鼠标点击下拉列表后的事件
var myValue;
ac.addEventListener("onconfirm",
function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province
+ _value.city
+ _value.district
+ _value.street
+ _value.business;
getObj("searchResultPanel").innerHTML = "onconfirm<br />index = "
+ e.item.index
+ "<br />myValue = " + myValue;
// 设置搜到的地点图标
setPlace(myValue);
});
}// 百度地图API功能
function getObj(id) { return document.getElementById(id);
}// 设置搜到的地点图标
function setPlace(myValue) { map.clearOverlays(); // 清除地图上所有覆盖物
function myFun() { var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp, {icon:myIcon})); //添加标注和自定义图标
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete : myFun
});
local.search(myValue);
}
解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)相关推荐
- echarts 中使用百度地图 bmap （基础使用：仅显示、定义样式）
1. 实现功能 实现简单的自定义样式百度地图,仅显示(基础,可自己研究扩展) 效果: 2. 代码步骤 第一步:创建基础结构,id="map" 的 div 做 echarts 容器 ...
- 百度地图_自动标记/点击图标显示对应信息
1.百度地图前端页面–根据json数据自动标记,点击标记显示对应信息. 百度地图JavaScript API :http://lbsyun.baidu.com/cms/jsapi/reference/ ...
- vue中实现百度地图的引用（根据输入框输入内容获取详细地址）
vue中实现百度地图的引用(根据输入框输入内容获取详细地址) 代码内容参考:https://www.cnblogs.com/shuaifing/p/8185311.html 最终实现效果 第一步:在i ...
- MDK keil 图标显示异常的解决办法
在使用MDK keil的过程中,有时会遇到不知什么原因引起的图标显示异常的现象,比如编译图标的位置,会显示新建文件的图标(但是实际功能是编译). 解决办法: 界面的菜单栏有个"Windows ...
- android 百度地图闪退,Android使用百度地图出现闪退及定位时显示蓝屏问题的解决方法...
使用百度地图出现闪退 一般情况下出现闪退是在AndroidManifest.xml文件中未在application标签中配置 android:name="com.baidu.lbsapi.A ...
- 在网页中插入百度地图
在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api. 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/ ...
- Android --- 解决 registerLocationListener 过时问题（百度地图）API
第一行代码中使用百度地图,registerLocationListener 过时,问题原因与修改方法如下 修改方法:将原代码中public class MyLocationListener imple ...
- 在网页中插入百度地图(实例)
步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地 ...
- 在ionic/cordova中使用百度地图插件
在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...
最新文章
- Nginx 403 Forbidden 排错记录汇总
- 《大话存储》读书笔记一
- td 中连续数字或连续英文内容不自动换行
- 全球及中国车载扫地机行业销售前景态势与运营盈利分析报告2022版
- Oracle安装笔记
- js使用hover事件做一个“个人中心”的浮动层
- Java线程start（）vs run（）方法及示例
- win11资源管理器卡顿怎么办 Windows11解决资源管理器卡顿的步骤方法
- python文本格式_python处理文本文件并生成指定格式的文件
- 微电子学概论简要笔记
- Auto.js 读写txt文件
- 游戏思考04补充：网络游戏同步算法的理解（参考网易雷火jerish的文章，未完待续7/23，参考文献附尾，物理同步已更新完）
- php网站恶意注册表,突破封锁 解决注册表被恶意锁定的方法
- Activiti 会签/或签 设计思路
- 为何丧尸只会攻击人类，而不“咬”动物？
- 感谢各位iPhone12机主，苹果又高了
- 数开头的成语有哪些_一至十数字开头的成语有哪些？
- OpenCV学习日记（2）
- html中段落标志中标注文件子标题的是,html中段落标志中，标注文件子标题的是？（）...
- Web API 之 — Beacon