<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地图练习</title>
</head>
<style type="text/css">
html {height: 100%;}
body{height: 100%; margin: 0px; padding: 0px;}
#container{height: 100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=PeBUf5626HGDsEWw2Hk8e6sw6TrsRv32"></script>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script>
/*1.申请百度ak*/
/*创建地图实例，初始化地图*/
//北京 116.41667,39.91667
//郑州 113.65000,34.76667
//杭州 120.20000,30.26667
var map = new BMap.Map("container");// 创建地图实例
var point = new BMap.Point(120.20000,30.26667);// 创建点坐标
map.centerAndZoom(point, 11);// 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //启用滚轮放大缩小，默认禁用 true开启 false关闭
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,//默认显示地图
BMAP_HYBRID_MAP //混合地图
]
}));
//map.setCurrentCity("乌鲁木齐"); // 设置地图显示的城市 此项是必须设置的
//map.setMapType(BMAP_HYBRID_MAP);//设置使用混合地图
//步行规划
/*var walk = new BMap.WalkingRoute(map, {
renderOptions: {map: map}
});
walk.search("西溪湿地", "西溪印象城");*/
//圆形区域检索
var local = new BMap.LocalSearch(map,{renderOptions:{map: map, autoViewport: true}});
local.searchNearby("小吃", "前门");
/*//矩形检索
var local = new BMap.LocalSearch(map,
{ renderOptions:{map: map}});
local.searchInBounds("小吃", map.getBounds());*/
//marker
/*function addMarker(point, index){ // 创建图标对象
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
}
// 随机向地图添加10个标注
var bounds = map.getBounds();
var lngSpan = bounds.maxX - bounds.minX;
var latSpan = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i ++) {
var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),
bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));
addMarker(point, i);
}*/
//驾车路线规划
/*var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
driving.search("西溪湿地", "西溪印象城");*/
/*将后台传的城市转化为百度地图识别的经纬度point实例（地址解析）*/
/*var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("北京市海淀区上地10街", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}else{
alert("您选择地址没有解析到结果!");
}
}, "北京市");
*/
/*4.将多个后台传过来的机构转化为经纬度标注在地图上（批量地址解析）*/
/*
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(117.269945,31.86713), 13);
map.enableScrollWheelZoom(true);
var index = 0;
var myGeo = new BMap.Geocoder();
var adds = [
"包河区金寨路1号（金寨路与望江西路交叉口）",
"庐阳区凤台路209号（凤台路与蒙城北路交叉口）",
"蜀山区金寨路217号(近安医附院公交车站)",
"蜀山区梅山路10号(近安徽饭店) ",
"蜀山区 长丰南路159号铜锣湾广场312室",
"合肥市寿春路93号钱柜星乐町KTV（逍遥津公园对面）",
"庐阳区长江中路177号",
"新站区胜利路89"
];
function bdGEO(){
var add = adds[index];
geocodeSearch(add);
index++;
}
function geocodeSearch(add){
if(index < adds.length){
setTimeout(window.bdGEO,400);
}
myGeo.getPoint(add, function(point){
if (point) {
document.getElementById("result").innerHTML += index + "、" + add + ":" + point.lng + "," + point.lat + "</br>";
var address = new BMap.Point(point.lng, point.lat);
addMarker(address,new BMap.Label(index+":"+add,{offset:new BMap.Size(20,-10)}));
}
}, "合肥市");
}
// 编写自定义函数,创建标注
function addMarker(point,label){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label);
}
*
* */
/*5.项目代码*/
/*
var height = document.body.clientHeight;
$('.box').height(height-54);
var map = new BMap.Map("container");// 创建地图实例
var point = new BMap.Point(116.404, 39.915);// 创建点坐标
map.centerAndZoom(point, 11);// 初始化地图，设置中心点坐标和地图级别
//设置屏幕中心点为point
// var loadCount = 1;
// map.addEventListener("tilesloaded",function(){
// if(loadCount == 1){
// map.setCenter(point);
// }
// loadCount = loadCount + 1;
// });
//添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
//默认进入的城市
getMedical('北京');
//获取当前城市的医院
function getMedical(newCity){
$.ajax({
type: 'POST',
url: '/schedule/getInfo',
data:{city:newCity},
dataType: "json",
success: function(data){
$('.cover').hide();
$('.mapImg').hide();
var medical = [];
var addr = [];
var phone = [];
for(var i=0;i<data.length;i++){
medical.push(data[i].title);
addr.push(data[i].addr);
phone.push(data[i].phone);
}
//将城市转化为经纬度并且将地图中心点移到此城市
var cityGeo = new BMap.Geocoder();
cityGeo.getPoint(newCity,function(point){
if(point){
map.setCenter(point);
}
}, newCity);
//将指定城市的医院转化为经纬度并标注
var medicalGeo = new BMap.Geocoder();
var index = 0;
function bdGEO(){
var add = medical[index];
var addAddr = addr[index];
var addPhone = phone[index];
geocodeSearch(add,addAddr,addPhone);
index++;
}
function geocodeSearch(add,addAddr,addPhone){
if(index <= medical.length){
setTimeout(bdGEO,200);
}
medicalGeo.getPoint(add, function(point){
if (point) {
addMarker(point, index,add,addAddr,addPhone);
}
}, newCity);
}
function addMarker(point, index,add,addAddr,addPhone){ // 创建图标对象
var myIcon = new BMap.Icon("/public/dist/images/marker2.png", new BMap.Size(34, 94), {
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
marker.addEventListener("click", function(){
var tapTitle = '<a href="/schedule/home" style="font-size:.75rem;">'+add+'</a>';
var tapCont = '<p style="margin:.5rem 0;font-size: .7rem;">'+addAddr+' '+addPhone;
var opts = {
width : 180, //信息窗口宽度
height: 90, //信息窗口高度
title : tapTitle //信息窗口标题
}
var infoWindow = new BMap.InfoWindow(tapCont, opts);//创建信息窗口对象
map.openInfoWindow(infoWindow, point);//打开信息窗口
});
}
bdGEO();
}
});
}
* */
</script>
</html>
