【百度、高德】模仿房产酒店网站—

功能亮点：

自定义标注
地理坐标
批量marker
支持高德，百度
无Key也能用

发表点拙见。

高德的地图跟随移动不够好。但是窗体阴影效果很炫。

百度的移动很合理。窗体界面功能单一。

贴上高德代码，百度的代码具体实现参考酸奶小妹的博客

http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html

<!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 name="viewport" content="initial-scale=1.0,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>KK-高德地图</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
html{height:100%}
#container{height:100%}
a{text-decoration:none;color:#6ce;font-size:14px;}
a:hover{text-decoration:underline;}
div.map {width: 800px;height: 500px;
}
div.info {position: relative;z-index: 100;border: 1px solid #BCBCBC;box-shadow: 0 0 10px #B7B6B6;border-radius: 8px;background-color: rgba(255,255,255,0.9);transition-duration: 0.25s;
}
div.info:hover {box-shadow: 0px 0px 15px #0CF;
}div.info-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius:5px 5px 0 0;
}
div.info-top div {display: inline-block;color: #333333;font-size:14px;font-weight:bold;line-height:31px;padding:0 10px;
}
div.info-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;
}
div.info-top img:hover{box-shadow: 0px 0px 5px #000;
}
div.info-middle {font-size:12px;padding:10px;line-height:21px;
}
div.info-bottom {height:0px;width:100%;clear:both;text-align:center;
}
div.info-bottom img{position: relative;z-index:104;
}</style>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.2">
</script>
<script type="text/javascript">function initialize() {var position = new AMap.LngLat(116.404, 39.915); //创建中心点坐标
//        var mapObj = new AMap.Map("container", { center: position }); //创建地图实例}
</script><script language="javascript">var obj, tool, view;var point = [new AMap.LngLat(116.411776, 39.942833), new AMap.LngLat(116.320791, 40.003682), new AMap.LngLat(116.275186, 39.896095), new AMap.LngLat(116.425098, 39.946249), new AMap.LngLat(116.359823, 39.984761), new AMap.LngLat(116.316479, 39.98323), new AMap.LngLat(116.385986, 39.946124), new AMap.LngLat(116.427545, 40.00796), new AMap.LngLat(116.446965, 39.911603), new AMap.LngLat(116.454579, 39.946652)];   //10个坐标点var marker1 = new AMap.Marker({ map: obj, position: point[1], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker2 = new AMap.Marker({ map: obj, position: point[2], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker3 = new AMap.Marker({ map: obj, position: point[3], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker4 = new AMap.Marker({ map: obj, position: point[4], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker5 = new AMap.Marker({ map: obj, position: point[5], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker6 = new AMap.Marker({ map: obj, position: point[6], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker7 = new AMap.Marker({ map: obj, position: point[7], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker8 = new AMap.Marker({ map: obj, position: point[8], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker9 = new AMap.Marker({ map: obj, position: point[9], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });var marker0 = new AMap.Marker({ map: obj, position: point[0], offset: new AMap.Pixel(-8, -34), icon: "http://webapi.amap.com/images/marker_sprite.png", draggable: false });//        var infoWindow1 = new AMap.InfoWindow({
//            isCustom: true,
//            content: InfoWindow('方恒假日酒店  <span style="font-size:11px;color:#F00;">价格:318</span>', "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134' style='float:left;margin:0 5px 5px 0;'>地址：北京市朝阳区阜通东大街6号院3号楼 东北 8.3 公里<br/>电话：010 64733333"),
//            size: new AMap.Size(300, 0),
//            offset: new AMap.Pixel(0, -50)//-113, -140
//        });//        var infoWindow2 = new AMap.InfoWindow({
//            isCustom: true,
//            content: InfoWindow('这里是标题123', "<div>4567ssdfdf:分析师们认为，iPhone5缺货是苹果股价最近下跌的主要原因用的新显示屏供应不足。</div>"),
//            size: new AMap.Size(300, 0),
//            offset: new AMap.Pixel(0, -50)//-113, -140//        });var infoWindow1 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">如家快捷酒店 </span><span style="font-size:11px;color:#F00;">价格:120</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow2 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">昆仑大厦</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow3 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">华夏银行</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow4 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">成都小吃</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow5 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">锦绣大饭店</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow6 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">七天快捷酒店</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow7 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">中央民族大学</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow8 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">昌平汽车专修学院</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow9 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('<span style="font-size:14px;color:#0A8021">百度大厦</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });var infoWindow0 = new AMap.InfoWindow({ isCustom: true, content: InfoWindow('方恒假日酒店  <span style="font-size:11px;color:#F00;">价格:318</span>', "<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>"), size: new AMap.Size(300, 0), offset: new AMap.Pixel(0, -50) });function mapInit() {obj = new AMap.Map("iCenter");obj.plugin(["AMap.ToolBar", "AMap.OverView"], function () {//加载工具条tool = new AMap.ToolBar({ autoPosition: false });obj.addControl(tool);//加载鹰眼view = new AMap.OverView();obj.addControl(view);});obj.addOverlays(marker1);obj.addOverlays(marker2);obj.addOverlays(marker3);obj.addOverlays(marker4);obj.addOverlays(marker5);obj.addOverlays(marker6);obj.addOverlays(marker7);obj.addOverlays(marker8);obj.addOverlays(marker9);obj.addOverlays(marker0);AMap.event.addListener(marker1, 'mouseover', function () { infoWindow1.open(obj, marker1.getPosition()); });AMap.event.addListener(marker2, 'mouseover', function () { infoWindow2.open(obj, marker2.getPosition()); });AMap.event.addListener(marker3, 'mouseover', function () { infoWindow3.open(obj, marker3.getPosition()); });AMap.event.addListener(marker4, 'mouseover', function () { infoWindow4.open(obj, marker4.getPosition()); });AMap.event.addListener(marker5, 'mouseover', function () { infoWindow5.open(obj, marker5.getPosition()); });AMap.event.addListener(marker6, 'mouseover', function () { infoWindow6.open(obj, marker6.getPosition()); });AMap.event.addListener(marker7, 'mouseover', function () { infoWindow7.open(obj, marker7.getPosition()); });AMap.event.addListener(marker8, 'mouseover', function () { infoWindow8.open(obj, marker8.getPosition()); });AMap.event.addListener(marker9, 'mouseover', function () { infoWindow9.open(obj, marker9.getPosition()); });AMap.event.addListener(marker0, 'mouseover', function () { infoWindow0.open(obj, marker0.getPosition()); });//调整视野到合适的位置及级别                  obj.setFitView();}function openMyWin(robj, p) {robj.open(obj, p);}window.onload = function () {mapInit();};function closeInfoWindow() {obj.clearInfoWindow();}// 自定义信息窗体实现function InfoWindow(title, content) {var info = document.createElement("div");info.className = "info";// 定义顶部标题var top = document.createElement("div");top.className = "info-top";var titleD = document.createElement("div");titleD.innerHTML = title;var closeX = document.createElement("img");closeX.src = "http://webapi.amap.com/images/close2.gif";closeX.onclick = closeInfoWindow;top.appendChild(titleD);top.appendChild(closeX);info.appendChild(top);// 定义中部内容var middle = document.createElement("div");middle.className = "info-middle";middle.innerHTML = content;info.appendChild(middle);// 定义底部内容var bottom = document.createElement("div"), sharp;bottom.className = "info-bottom";sharp = document.createElement("img");sharp.src = "http://webapi.amap.com/images/sharp.png";bottom.appendChild(sharp);info.appendChild(bottom);return info;}</script>  </head>
<body οnlοad="mapInit()">
<div id="iCenter" style="float:left;width:520px;height:340px;border:1px solid gray"> </div>
<div style="float:left;width:200px;height:340px;border:1px solid gray;border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8em;"><ul><li><span style="float:right;">120元</span><a οnmοuseοver="openMyWin(infoWindow1,point[1])" href="#">如家快捷酒店</a></li><li><span style="float:right;">2370元</span><a οnmοuseοver="openMyWin(infoWindow2,point[2])" href="#">昆仑大厦</a></li><li><span style="float:right;">50元</span><a οnmοuseοver="openMyWin(infoWindow3,point[3])" href="#">华夏银行</a></li><li><span style="float:right;">16元</span><a οnmοuseοver="openMyWin(infoWindow4,point[4])" href="#">成都小吃</a></li><li><span style="float:right;">300元</span><a οnmοuseοver="openMyWin(infoWindow5,point[5])" href="#">锦绣大饭店</a></li><li><span style="float:right;">180元</span><a οnmοuseοver="openMyWin(infoWindow6,point[6])" href="#">七天快捷酒店</a></li><li><span style="float:right;">9元</span><a οnmοuseοver="openMyWin(infoWindow7,point[7])" href="#">中央民族大学</a></li><li><span style="float:right;">3300元</span><a οnmοuseοver="openMyWin(infoWindow8,point[8])" href="#">昌平汽车专修学院</a></li><li><span style="float:right;">20元</span><a οnmοuseοver="openMyWin(infoWindow9,point[9])" href="#">百度大厦</a></li><li><span style="float:right;">1000元</span><a οnmοuseοver="openMyWin(infoWindow0,point[0])" href="#">海尔电器销售点</a></li></ul>
</div><div id="Div1" style="float:bottom;width:275px;height:155px;border:0px solid gray"><img src="signature.png" /></div>
</body>
</html>

【百度、高德】模仿房产酒店网站——自定义标注窗口相关推荐

百度地图JavaScript API 学习之自定义标注图标（一）
地图绘制之添加自定义标注图标(一) 通过Icon类可实现自定义标注的图标.附上Icon的类参考链接,自行查看官方提供了两种方法: 通过参数MarkerOptions的icon属性进行设置使用Mar ...
php百度地图添加标记,JavaScript API - 自定义标注 | 百度地图API SDK
实现initialize方法,当调用map.addOverlay方法时,API会调用此方法. 当调用map.addOverlay方法添加自定义覆盖物时,API会调用该对象的initialize方法用来 ...
百度地图只显示某个省自定义标注点添加鼠标事件
小白初试,这里用广西省为例,但是感觉百度地图加载属实有点慢=.= 以下是完整代码 <!DOCTYPE html> <html lang="en"> < ...
如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库...
摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章-- --------------------------------------------------------- 一.先按照前两篇 ...
地图标注源码 php,jQuery百度地图自定义标注信息代码
jQuery百度地图自定义标注信息代码是一款简单实用的百度地图api标注联系地址名称电话等信息代码. new BaiduMap({ id: "container2", title: ...
百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <!DOCTYPE html> ...
百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
百度地图自定义标注点
百度地图自定义标注点 //创建点 var point = new BMap.Point(109.49926175379778, 36.60449676862417); //创建自定义标 //参数1:自 ...
百度地图规划驾车线路DrivingRoute，自定义标注线路样式，禁止起始点途经点拖拽
使用百度地图驾车路线规划DrivingRoute方法,实现线路规划产品需求:根据百度规划的线路信息返回后台存储,但百度推荐的线路除了起点.途经点.终点不可拖拽外,其他地方可以拖拽实现思路:先将默认 ...
百度地图标注自定义标注图片【JS】
百度地图标注自定义标注图片 //设置场地标记点for (var i = 0; i < ground_info.length; i++) {var img_url = '/Static/Oa/im ...

【百度、高德】模仿房产酒店网站——自定义标注窗口

【百度、高德】模仿房产酒店网站——自定义标注窗口相关推荐

最新文章

热门文章