关于ecshop调用地图的总结

最新推荐文章于 2021-03-22 20:41:46 发布

BLACK_MUSIC

最新推荐文章于 2021-03-22 20:41:46 发布

阅读量754

点赞数

分类专栏：学习笔记文章标签：地图 ecshop 百度地图 javascript 编码

本文链接：https://blog.csdn.net/BLACK_MUSIC/article/details/41576891

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在ECSHOP中集成百度地图API，解决因JS冲突导致的地图不显示问题。通过引入百度地图JS库，设置地图显示，并在商品列表页面循环显示商品坐标，实现鼠标悬浮时显示详细信息。利用BMap Marker和InfoWindow创建标记并弹出窗口，提供良好的用户体验。

摘要由CSDN通过智能技术生成

网站页不能有ecshop本身的js代码，因为有了地图不显示，估计是js有冲突，我目前不会改。

调用百度地图就是调用百度写好的js就行了，详情看百度地图api开发文档，基本的例子都有。

关于页面列表显示的问题，坐标点是肯定要有的。

在dwt页面

调用goods_list.lib文件（货物列表显示页）

在goods_list.lib页面布局自己调（百度地图api有团购插件如果显示布局合适可以用那个）

//此为列表现实页（加载地图成功显示，通过js主要显示的点）
<div >
<ul>

//循环显示货物列表信息

//调用js设置鼠标放上去的事件把你要显示到地图上的信息传到相应的js中
<li style="margin-top:20px;margin-left: 15px; "><a οnmοuseοver=" haha(参数1,参数2,经度,纬度" href="链接"><span style="color:red;">内容</span></a>
<hr>
</li>

</ul>
</div>

<script type="text/javascript">

//加载地图插件
var map = new BMap.Map("container");

//确定起始坐标点和缩放大小
map.centerAndZoom(new BMap.Point(116.417854,39.921988), 12);
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.enableScrollWheelZoom();
map.centerAndZoom(point, 12);

//设置窗口信息大小
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "标题头信息", // 信息窗口标题
enableMessage:false//设置允许信息窗发送短息
};

function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}

//循环创建多个点
{foreach name=goods_list from=$goods_list item=goods}
var point = new BMap.Point({$goods.lng},{$goods.lat});
addMarker(point);
{/foreach}
map.setViewport(point);

//鼠标移动到相应的位置调用该方法
function haha (a,b,c,d){
var sContent =b+a; //显示的内容变量用加号连接
var infoWindow = new BMap.InfoWindow(sContent,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,new BMap.Point(c,d)); //开启信息窗口
}
</script>

完成的样子

放到相应的位置标签显示地点。