<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-language" content="zh-CN">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="applicable-device" content="pc"/>
<title>baidumap</title>
<link rel="stylesheet" href="detail2.css" type="text/css" />
<link rel="stylesheet" href="common.css"/>
<link rel="stylesheet" href="xiangqing.css"/>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="bg-color"/>
</html>
<div class="inner">
<!-- 生活地图 -->
<div class="comm-box sh-map clear" id="shdt" style='background-color:#f9f9f9'>
<h3 class="noborder"><span style='background-color:#f9f9f9'>生活地图</span></h3>
<div class="wrap_content" >
<div class="my_content wh1200">
<div class="cont_box">
<div class="cont_des_four cont_des" id="peitao">
<div class="cont_tit">
<h2></h2>
</div>
<div class="cont_cont clearfix" style="padding-right:28px;">
<div class="bd_map_box">
<div class="bd_map">
<div class="map_box" id="baidumap">
</div>
</div>
<div class="map_tools">
<div class="tool_tit_box clearfix">
<ul class="t_t_ul">
<li id="traffic" onclick="periphery('traffic')" class="active">交通</li>
<li id="education" onclick="periphery('education')" >教育</li>
<li id="medical" onclick="periphery('medical')" >医疗</li>
<li id="shopping" onclick="periphery('shopping')" >购物</li>
<li id="life" onclick="periphery('life')" >生活</li>
</ul>
</div>
<div class="m_p_cont">
<div class="tool_wrap">
<div class="tool_one gongjiao">
<div class="stand_txt">
<p>公交</p>
</div>
<ul class="tool_list">
<li>
<p class="fl station">正在加载<span></span></p>
<span class="t_range fr">XXX米</span>
</li>
</ul>
</div>
</div>
<a id="map_more" target="_blank" href="javascript:void(0)" class="tool_more">更多>></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://api.map.baidu.com/api?v=2.0&ak=Va3AQDi5HxLTcxfSDa0Oco1F1lkt0isx" type="text/javascript"></script>
<script type="text/javascript">
/* 百度地图 */
var map ;
var point;
var markers = [];
//经纬度
var map_lng='112.945352';
var map_lat='28.234486';
var city = '长沙';
var community_name = '长沙市';
function clearMarkers(){
for(var i in markers){
map.removeOverlay(markers[i]);
}
}
function addMarker(point,zoom){
var marker = new BMap.Marker(point); // 创建标注
if(zoom){
map.centerAndZoom(point, zoom);
}else{
map.centerAndZoom(point, 15);
}
map.addOverlay(marker);
markers.push(marker) // 将标注添加到地图中
}
function startAnimation(){
for(var i in markers){
markers[i].setAnimation(BMAP_ANIMATION_BOUNCE)
}
}
$(function(){
///地图功能/////////////////////////////////////////////////////////////////////////
map = new BMap.Map("baidumap"); // 创建Map实例
map.enableScrollWheelZoom();
if(map_lng && map_lat){
point = new BMap.Point(map_lng, map_lat);
map.centerAndZoom(point, 15);
periphery('traffic')
}else{
map.centerAndZoom(city,15)
if(community_name){
var local = new BMap.LocalSearch(map, {
onSearchComplete: function(results){
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
var arr = [];
for (var i = 0; i < results.getCurrentNumPois(); i ++){
var obj = new Object();
obj.title = results.getPoi(i).title
obj.address = results.getPoi(i).address
obj.point = results.getPoi(i).point
arr.push(obj);
}
var first = arr.shift();
point = first.point;
var zoom = map.getZoom();
clearMarkers()
addMarker(point,zoom)
startAnimation()
periphery('traffic')
}
}
});
local.search(city+community_name);
}
}
})
function periphery(type){
$('#'+type).addClass('active')
$('#'+type).siblings().removeClass('active')
var options = {
onSearchComplete: function(results){
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
var s = [];
var lis = '';
for (var i = 0; i < results.getCurrentNumPois(); i ++){
var p = results.getPoi(i).point;
var m = new BMap.Marker(p); // 创建标注
var opts = {
width : 80, // 信息窗口宽度
height: 40, // 信息窗口高度
title : results.getPoi(i).title , // 信息窗口标题
enableMessage:false,//设置允许信息窗发送短息
message:results.getPoi(i).address
}
var distance = Math.ceil( map.getDistance(point,p));
var infoWindow = new BMap.InfoWindow("距离："+distance+'米', opts); // 创建信息窗口对象
function info(m,opts,infoWindow,point){
m.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
}
if(i<6){
if(results.keyword =='地铁'){
lis += '<li>' +
H5 百度API 地图展示
需积分: 50 137 浏览量
2018-12-20
13:23:34
上传
评论
收藏 42KB RAR 举报
生活地图.rar （11个子文件） 
生活地图 
detail2.css 987B xiangqing.css 3KB common.css 5KB
xiangqing.html 16KB jquery-1.11.0.min.js 94KB img icon 
shop.png 317B doctor.png 391B subway.png 1KB
life.jpg 850B edu.png 352B bus.png 1KB
评论0
最新资源