ecshop加入百度地图接口,首先在你要调用的页面加入下面这段话(样式可以自己调),传入默认的值,分别是经度、纬度、关键字(可以标记地图范围内与你关键字有关的地点)。
<ul>
<li onclick="reload_map({$room.longitude},{$room.latitude},'公交站')" class="current">公交</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'地铁站')">地铁</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'嘉利华酒店')">周边嘉利华</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'旅游')">旅游</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'餐馆')">餐饮</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'购物')">购物</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'娱乐')">娱乐</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'医疗')">医疗</li>
<li onclick="reload_map({$room.longitude},{$room.latitude},'银行')">银行</li>
</ul>
<iframe src="hotels_map.php?weidu={$room.latitude}&jingdu={$room.longitude}&keywords=公交站" width="752" height="389" id="map_iframe"></iframe>
<script type="text/javascript">
//地图
function reload_map(jingdu,weidu,keywords){
var url = "hotels_map.php?weidu="+weidu+"&jingdu="+jingdu+"&keywords="+keywords;
$("#map_iframe").attr("src",url);
}
</script>
这样就可以实现切换的效果,点击不同的选项卡,可以查看不同地图的内容。
hotels_map.php 部分:
<?php
$weidu = $_REQUEST['weidu'];
$jingdu = $_REQUEST['jingdu'];
$keywords = $_REQUEST['keywords'];
if($keywords == '嘉利华酒店'){
$suofang = 11;
}else{
$suofang = 14;
}
$str = '<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙(很简单就可以申请到)"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<title>根据中心点关键字周边搜索</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//谷歌坐标转化为百度坐标
var xx = '.$jingdu.';
var yy = '.$weidu.';
var ggPoint = new BMap.Point(xx,yy);
//坐标转换完之后的回调函数
translateCallback = function (point){
//alert(point.lng + "," + point.lat);
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(point.lng, point.lat), '.$suofang.');//初始化时,即可设置中心点和地图缩放级别。
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map, autoViewport:true}
});
map.addControl(new BMap.ScaleControl());
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
var point = new BMap.Point((point.lng), (point.lat));
map.centerAndZoom(point, '.$suofang.');
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//可视范围搜索
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.searchInBounds("'.$keywords.'", map.getBounds());
}
setTimeout(function(){
BMap.Convertor.translate(ggPoint,2,translateCallback); //GCJ-02坐标转成百度坐标
}, 300);
</script>';
echo $str;
?>
如果有问题,欢迎问我。
文章出自:https://www.daixiaorui.com/read/60.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。
瑞兄,可以分享下源码吗,十分感谢
感觉不够完善,说得不怎么全面 是否能再详细点呢