百度地图批量标记点怎么写JS

登录

本帖最后由 AAA努力才幸福于 2023-3-6 09:28 编辑

如题，批量把数据表中的经纬度标记到地图上

AAA努力才幸福 · AAA努力才幸福

var p = Forguncy.Page; // 获取当前页面
var element = $("[fgcname='chart']")[0];
var map = new BMap.Map(element); // 创建Map实例
map.centerAndZoom(new BMap.Point(113.636878,34.757711), 8); // 初始化地图,设置中心点坐标和地图级别
// 添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
map.setCurrentCity("郑州"); // 设置地图显示的城市此项是必须设置的
map.enableScrollWheelZoom(true);
// 读取A1单元格中的JSON数据
var data = JSON.parse(Forguncy.Page.getCell("gps").getValue());
// 批量标记坐标点
data.forEach(function(point) {
var coords = point.gps.split(";");
var pointLatLng = new BMap.Point(coords[0], coords[1]);
// 创建标记点
var marker = new BMap.Marker(pointLatLng);
map.addOverlay(marker);
// 点击标记点弹出信息框
var infoWindow = new BMap.InfoWindow();
marker.addEventListener("click", function() {
// 构建信息框内容
var content = "";
if (point.file_id) {
content += "<div>附件：<a href='/file/" + point.file_id + "' target='_blank'>" + point.file_name + "</a></div>";
}
if (point.image_url) {
content += "<div>图片：<img src='" + point.image_url + "'></div>";
}
if (point.物料名称) {
content += "<div>物料名称：" + point.物料名称 + "</div>";
}
if (point.项目名称) {
content += "<div>项目名称：" + point.项目名称 + "</div>";
}
if (point.收货人) {
content += "<div>收货人：" + point.收货人 + "</div>";
}
infoWindow.setContent(content);
// 显示信息框
map.openInfoWindow(infoWindow, pointLatLng);
});
});

复制代码

注意json数据格式，其他设置参考官方百度组件在设置内添加接口

Joe.xu · Joe.xu

您好，代码方面我们也不太擅长，不过我可以帮你在我们的项目需求及大群宣传一下，
那边有很多大神，说不定几天就搞好了，不过这种事一般是有偿的，需要的话，留下您的电话号码

AAA努力才幸福 · AAA努力才幸福

已经解决了，以下代码可以实现，
注意json数据格式及字段

var p = Forguncy.Page; // 获取当前页面
var element = $("[fgcname='chart']")[0];
var map = new BMap.Map(element); // 创建Map实例
map.centerAndZoom(new BMap.Point(113.636878,34.757711), 8); // 初始化地图,设置中心点坐标和地图级别
// 添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
map.setCurrentCity("郑州"); // 设置地图显示的城市此项是必须设置的
map.enableScrollWheelZoom(true);
// 读取A1单元格中的JSON数据
var data = JSON.parse(Forguncy.Page.getCell("gps").getValue());
// 批量标记坐标点
data.forEach(function(point) {
var coords = point.gps.split(";");
var pointLatLng = new BMap.Point(coords[0], coords[1]);
// 创建标记点
var marker = new BMap.Marker(pointLatLng);
map.addOverlay(marker);
// 点击标记点弹出信息框
var infoWindow = new BMap.InfoWindow();
marker.addEventListener("click", function() {
// 构建信息框内容
var content = "";
if (point.file_id) {
content += "<div>附件：<a href='/file/" + point.file_id + "' target='_blank'>" + point.file_name + "</a></div>";
}
if (point.image_url) {
content += "<div>图片：<img src='" + point.image_url + "'></div>";
}
if (point.物料名称) {
content += "<div>物料名称：" + point.物料名称 + "</div>";
}
if (point.项目名称) {
content += "<div>项目名称：" + point.项目名称 + "</div>";
}
if (point.收货人) {
content += "<div>收货人：" + point.收货人 + "</div>";
}
infoWindow.setContent(content);
// 显示信息框
map.openInfoWindow(infoWindow, pointLatLng);
});
});

复制代码

Joe.xu · Joe.xu

ToPMonsTeR · ToPMonsTeR

你找到解决办法了吗?

AAA努力才幸福 · AAA努力才幸福

ToPMonsTeR 发表于 2024-6-16 15:02
你找到解决办法了吗?

js写，看我上面的代码就可以实现。

ToPMonsTeR · ToPMonsTeR

AAA努力才幸福发表于 2024-6-16 15:13
js写，看我上面的代码就可以实现。

读取A1单元格的Jason数据这个我有点不太理解

ToPMonsTeR · ToPMonsTeR

按照代码复制进出运行后没有反应.

AAA努力才幸福 · AAA努力才幸福

ToPMonsTeR 发表于 2024-6-16 15:19
读取A1单元格的Jason数据这个我有点不太理解

把数据库的每一组经纬度。合成一个数组

		自动登录	找回密码
密码			立即注册

[已处理] 百度地图批量标记点怎么写JS

13 个回复

评分

本帖子中包含更多资源

活字格认证

活字格高级认证

微信认证勋章

讲师达人

悬赏达人

圣诞拼拼乐