地图的调用
调用百度地图，先申请注册成为开发者，获取密钥
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>地图</title>
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"><!-- 引用bootstrap，创建导航条inverse样式，再将导航条固定在顶部 -->
<div class="container"><!-- 创建容器container以便于布局 -->
<div class="navbar-header"><!-- 再添加导航条的header -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#res-navbar">
<!-- 创建按钮，功能是在小尺寸的显示屏上面折叠导航条，折叠的目标指向id为res-navbar的部分 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!-- 设置折叠按钮的样式，引用icon-bar指一条横线，三次形成三条横线的按钮图标 -->
</button>
<a href="0.html" class="navbar-brand"><strong>玫瑰绽放</strong></a>
<!-- 为“Derrick Rose”加强调，同时给链接指向页面，class部分引用bootstrap中的navbar-brand -->
</div>
<div class="collapse navbar-collapse" id="res-navbar">
<!-- 这是是id为res-navbar的导航条中的折叠部分，在小尺寸的显示器上折叠“collapse” -->
<ul class="nav navbar-nav">
<li><a href="1.html">基本信息</a></li>
<li><a href="2.html">早年经历</a></li>
<li><a href="3.html">NBA生涯</a></li>
<li><a href="4.html">场外生活</a></li>
<li><a class="active" href="ditu.html">篮球场地址</a></li>
</ul>
<p class="navbar-text navbar-right"><strong>德里克罗斯——NBA史上最年轻的MVP</strong></p>
<!-- 属于导航栏的一部分，内容强调，text只内容是以文本显示，同时right使其靠右 -->
</div>
</div>
</nav>
<h1 align="center">像罗斯一样永不放弃，继续追逐篮球梦！</h1>
<br>
<div class="container">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div><!--百度地图容器-->
</div>
</div>
</div>
<p align="center">（篮球场位置已经标记在地图中）</p>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap(){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(104.064318,30.690383),14);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
var markers = [
{content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.638569,lng:104.091196}},
{content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.664418,lng:104.036004}},
{content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.64702,lng:104.205029}},
{content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.741921,lng:104.090621}},
{content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.674357,lng:104.128278}},
{content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.683675,lng:104.054545}},
{content:"我的备注",title:"篮球场",imageOffset: {width:0,height:3},position:{lat:30.662927,lng:104.063456}}
];
for(var index = 0; index < markers.length; index++ ){
var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
})});
var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
marker.setLabel(label);
addClickHandler(marker,infoWindow);
map.addOverlay(marker);
};
}
//向地图添加控件
function addMapControl(){
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl);
}
var map;
initMap();
</script>
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</html>
浙公网安备 33010602011771号