前几天接了一个小项目，就是有关百度地图的，和我的上一篇不一样，上一篇是复制人家的源代码是把东西写死了的，这次的比较有难度，要调取他的接口，用js来实现。
下面我先说一下主要实现的功能，和要实现的页面
这个小项目分为前台和后台
前台需要两个页面，第一个页面是一打开就可以获得自己的实时位置，显示当前位置与当前的经纬度，这两项是自动获取的，还有标题和电话是可以自己添加的，点击添加，就是到达百度地图的页面，你刚刚添加的东西就会在这个地图上显示，形成一个标注，点击标注，里面显示的就是刚刚你添加的标题和电话。
后台就是显示你添加的那些信息，也就是说你在添加的时候，就已经把他存入数据库了，你可以通过后台来修改他的标题和电话，其他两项不可改，或是可以直接删除，删除的话，地图上的小标注也会消失。
功能差不多就是这些，当时写的时候，没有具体的讲清楚饶了很多弯路，当真正理清楚了反而觉得没有那么难了，不过确实也没有学过，感觉好多东西都是遇到了才边学边会做
废话不多说了，先来看一下效果吧
因为要手机也可以用，所以做的响应式的
他的位置取到的是这里
这个定位很不准确，有时取到的位置是对的，有时候会有偏差
下面再来给他添加标题和电话
会转到百度地图
会弹出刚才我们输入的内容
看一下数据库
刚才添加的那条也进了数据库
还有其他两个地点。我们从地图上找一下
另外两个标在这里，点击标识
都可以出现里面的内容
然后再来看后台页面
可以对其进行修改，删除
后面加了333，点击修改
具体就是这么一个操作
做的时候只需要参考一个网址就可以http://lbsyun.baidu.com/index.php?title=jspopular&qq-pf-to=pcqq.c2c
这个网址是关于百度地图操作的
进入后就是这样的
调接口前首先要点击获取秘钥,没有登录百度账号的，首先会让你登录，登陆后会出现一个这样的页面
你可以创建应用，内容可以随便填
创建了之后就会出现你创建好的应用
那个AK就是百度地图接口的秘钥
然后再打开一开始的窗口
功能介绍里面的小功能随便点进一个
然后就到达了这个页面
可以参考着这个来写
做这个小项目需要一个数据库，数据库如下
下面展示一下我的源代码把
前台添加页代码部分
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"&&/script&
&script type="text/javascript" src="jquery-1.11.2.min.js"&&/script&
&title&无标题文档&/title&
&style type="text/css"&
p{margin-left:5px; font-size:14px;}
#r1{ width:<span style="background-color: #f5f5f5; color: #%; max-width:<span style="background-color: #f5f5f5; color: #px; height:<span style="background-color: #f5f5f5; color: #px; text-align:center; }
#r2{ width:<span style="background-color: #f5f5f5; color: #%; max-width:<span style="background-color: #f5f5f5; color: #px; height:50px; text-align:center; }
#r3{ color:#999}
&body style="background-image:url(img/18I58PICdSi_1024.jpg); background-repeat:no- background-size:100% 600px"&
&h2 id="r2"&标注您当前位置，并添加信息&/h2&
&div id="r1"&
&form action="baidutj.php" method="post"&
&div&地& &址：&input type="text" name="dizhi" id='di' /&&/div&
&div&经纬度：&input type="text" name="du" id="result_"/&&/div&
&div&标& &题：&input type="text" name="biao" /&&/div&
&div&电& &话：&input type="text" name="dian" /&&/div&
&div&&input type="submit" value="标注" /&&/div&
&p id="r3"&注：地址和经纬度取您的实时位置,标注后会显示百度地图&/p&
&div id="allmap" style="display:none"&&/div&
&script type="text/javascript"&
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//alert('您的位置：'+r.point.lng+','+r.point.lat);
$("#result_").val(r.point.lng+','+r.point.lat);
var map = new BMap.Map("allmap");
var point = new BMap.Point(r.point.lng,r.point.lat);
map.centerAndZoom(point,12);
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){
var addComp = rs.addressC
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
$("#di").val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
alert('failed'+this.getStatus());
},{enableHighAccuracy: true})
这里的思路是这样的，先找到自己实时的经纬度，然后再根据经纬度转换为实时地址名
运行起来就是这样的
可能要等一小会，才会拾取到你的位置
&然后再来写添加的处理页面
$dizhi=$_POST["dizhi"];
$du= $_POST["du"];
$biao = $_POST["biao"];
$dian = $_POST["dian"];
//造连接对象
$db = new MySQLi("localhost","root","726","ziyuan");
//写SQL语句
$sql = "insert into ditu values('','{$dizhi}','{$du}','{$biao}','{$dian}')";
$r=$db-&query($sql);
header("location:baiduditu1.php");
echo "标注失败！";
就是普通的添加语句
再来看前台的地图部分
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&
&style type="text/css"&
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500 border:1px solid #000;}
p{margin-left:5 font-size:14}
&script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"&&/script&
&script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"&&/script&
&title&给多个点添加信息窗口&/title&
&body background="img/4ef34db0af8b9cae6326.jpg"&
&h2&地图显示&/h2&
&div id="allmap"&&/div&
&script type="text/javascript"&
// 百度地图API功能
map = new BMap.Map("allmap");
map.addControl(new BMap.NavigationControl());
//添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
//右下角，打开
map.enableScrollWheelZoom(true);
//启用滚轮放大缩小，默认禁用
map.centerAndZoom(new BMap.Point(118..812252), 15);
var data_info = [
$db = new MySQLi("localhost","root","726","ziyuan");
$sqla = "select jingwei,dizhi,biaoti,tem from ditu ";
$result = $db-&query($sqla);
$attra=$result-&fetch_all();
foreach($attra as $v)
[{$v[0]},'地址：{$v[1]}&br/&标题：{$v[2]}&br/&电话：{$v[3]}'],
var opts = {
width : 350,
// 信息窗口宽度
height: 100,
// 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
for(var i=0;i&data_info.i++){
var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));
// 创建标注
var content = data_info[i][2];
map.addOverlay(marker);
// 将标注添加到地图中
addClickHandler(content,marker);
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
function openInfo(content,e){
var p = e.
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts);
// 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
这里的标注是根据有几个位置就创建几个，然后就是它的信息窗口
后台代码部分
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
&link href="bootstrap.min.css" rel="stylesheet" type="text/css" /&
&script type="text/javascript" src="jquery-1.11.2.min.js"&&/script&
&script src="bootstrap.min.js"&&/script&
&style type="text/css"&
margin:0 padding:0px
color:#F00
width:100%;
text-align:center}
width:100%;
text-align:
color:#999
&body style="background-image:url(img/8e3ff763a61b0fe2a9efaa3bfb3ba1c4.jpg); background-repeat:no- background-size:100% 500px"&
&h1 id="q1" &地图信息管理&/h1&
&table width="80%" border="1" cellpadding="0" cellspacing="0"&
&td&地址&/td&
&td&经纬度&/td&
&td&标题&/td&
&td&电话&/td&
&td&操作&/td&
$db = new MySQLi("localhost","root","726","ziyuan");
$sql = "select * from ditu";
$result = $db-&query($sql);
$attr=$result-&fetch_all();
foreach($attr as $v)
echo "&tr&&td&{$v[1]}&/td&&td&{$v[2]}&/td&&td&{$v[3]}&/td&&td&{$v[4]}&/td&&td&&a href='baiduxg.php?id={$v[0]}'&修改&/a&&&&a class='a1' href='baidusc.php?id={$v[0]}' onclick=\"return confirm('确定删除么')\"&删除&/a&&/td&&/tr&";
&p id="q2"&注：可修改信息中的标题和电话&br /&数据删除后地图的标识也会删除&/p&
这里的操作就简单一点了，删改查
修改部分代码
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
&h1&修改地图信息&/h1&
$id = $_GET["id"];
//造连接对象
$db = new MySQLi("localhost","root","726","ziyuan");
//写SQL语句
$sql = "select * from ditu where id='{$id}'";
$result =$db-&query($sql);
$attr = $result-&fetch_row();
&form action="baiduxgcl.php" method="post"&
&div&地 &&址：&input type="text" disabled="disabled" name="dizhi" value="&?php echo $attr[1] ?&"/&&/div&
&input type="hidden"
name="id" value="&?php echo $attr[0] ?&"/&
&div&标 &&题：&input type="text" name="biaoti" value="&?php echo $attr[3] ?&"/&&/div&
&div&电 &&话：&input type="text" name="tem" value="&?php echo $attr[4] ?&"/&&/div&
&div&&input type="submit" value="修改" /&&/div&
修改处理代码
$id = $_POST["id"];
$biaoti = $_POST["biaoti"];
$tem = $_POST["tem"];
//造连接对象
$db = new MySQLi("localhost","root","726","ziyuan");
//写SQL语句
$sql = "update ditu set biaoti='{$biaoti}',tem='{$tem}' where id='{$id}'";
$r=$db-&query($sql);
header("location:baiduht.php");
echo "修改失败！";
最后就是删除部分代码
$id= $_GET["id"];
//造连接对象
$db= new MySQLi("localhost","qishuang","qishuang","qishuang");
//写SQL语句
$sql = "delete from ditu where id='{$id}'";
$r=$db-&query($sql);
header("location:baiduht.php");
echo "删除失败！";
这样一整个就做完了
-----------------------------------------------------------------------------------
还有一种功能，就是输入地址可以读出他的经纬度，然后从地图上立马找到
这个功能不跟大家细说了，下面我把源代码写下面
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&根据地址查询经纬度&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"&&/script&
&body style="background:#CBE1FF"&
&div style="width:730margin:"&
要查询的地址：&input id="text_" type="text" value="宁波天一广场" style="margin-right:100"/&
查询结果(经纬度)：&input id="result_" type="text" /&
&input type="button" value="查询" onclick="searchByStationName();"/&
&div id="container"
style="position:
margin-top:30
width: 730
height: 590
overflow:"&
&script type="text/javascript"&
var map = new BMap.Map("container");
map.centerAndZoom("宁波", 12);
map.enableScrollWheelZoom();
//启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();
//启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl());
//添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
//右下角，打开
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
function searchByStationName() {
map.clearOverlays();//清空原来的标注
var keyword = document.getElementById("text_").
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
document.getElementById("result_").value = poi.point.lng + "," + poi.point.
map.centerAndZoom(poi.point, 13);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
// 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
var content = document.getElementById("text_").value + "&br/&&br/&经度：" + poi.point.lng + "&br/&纬度：" + poi.point.
var infoWindow = new BMap.InfoWindow("&p style='font-size:14'&" + content + "&/p&");
marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
localSearch.search(keyword);
运行起来的话就是这种效果
阅读(...) 评论()Pages: 1/2
主题 : 高德地图想让地图一进来就显示当前位置的地图界面，而不是北京市地图
级别: 侠客
UID: 470502
可可豆: 412 CB
威望: 408 点
在线时间: 151(时)
发自: Web Page
来源于&&分类
高德地图想让地图一进来就显示当前位置的地图界面，而不是北京市地图&&&
请问大神们，高德地图想让地图一进来就显示当前位置的地图界面，而不是北京市地图，怎么解决？_mapView.showsUserLocation = YES;&&&&_mapView.userTrackingMode = MAUserTrackingModeF我是这么设置的，但是界面进来时先显示北京地图，后跳到当前位置的地图。
级别: 骑士
UID: 464473
可可豆: 831 CB
威望: 736 点
在线时间: 251(时)
发自: Web Page
我的就这样写的，显示的当前的：_mapView = [[MAMapView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_searchBar.frame), SCREENWIDTH, SCREENHEIGHT - CGRectGetMaxY(_searchBar.frame))];&&&&[_mapView setZoomLevel:20];&&&&[self.view addSubview:_mapView];&&&&&&&&// 去掉比例尺&&&&_mapView.showsScale = NO;&&&&&&&&// 开启蓝点定位&&&&_mapView.showsUserLocation = YES;&&&&_mapView.userTrackingMode = MAUserTrackingModeF&&&&&&&&// 开启POI&&&&_searchAPI = [[AMapSearchAPI alloc] init];&&&&_searchAPI.delegate =
人生无处不修行
级别: 侠客
UID: 470502
可可豆: 412 CB
威望: 408 点
在线时间: 151(时)
发自: Web Page
回 1楼(幕轻烟丶小宇) 的帖子
那跟我写的是一样的，，难道是因为我的网的问题导致的？这个bug不是必现的
级别: 侠客
UID: 470502
可可豆: 412 CB
威望: 408 点
在线时间: 151(时)
发自: Web Page
回 1楼(幕轻烟丶小宇) 的帖子
知道了&&_mapView.showsUserLocation = YES;&&&&_mapView.userTrackingMode = MAUserTrackingModeF这两句代码要放到[self.view addSubview:_mapView];后面。
级别: 骑士
UID: 464473
可可豆: 831 CB
威望: 736 点
在线时间: 251(时)
发自: Web Page
回 3楼(zhangxinliang) 的帖子
人生无处不修行
级别: 侠客
UID: 470502
可可豆: 412 CB
威望: 408 点
在线时间: 151(时)
发自: Web Page
回 4楼(幕轻烟丶小宇) 的帖子
还是会出现这个问题呀，，你真的没出现过吗。。
级别: 骑士
UID: 464473
可可豆: 831 CB
威望: 736 点
在线时间: 251(时)
发自: Web Page
回 5楼(zhangxinliang) 的帖子
哥们，我这没遇到过这问题。建议你重新导入官方最新的sdk试一下，或许是缓存机制或者sdk出问题了吧。
人生无处不修行
级别: 新手上路
可可豆: 2 CB
威望: 2 点
在线时间: 131(时)
发自: Web Page
我也出现了 是偶尔 楼主解决了吗
级别: 侠客
UID: 519363
可可豆: 322 CB
威望: 263 点
在线时间: 346(时)
发自: Web Page
我也出现了
级别: 侠客
UID: 519363
可可豆: 322 CB
威望: 263 点
在线时间: 346(时)
发自: Web Page
是不是高德地图有bug啊，我进入地图页面延迟0.5秒执行 _mapView.userTrackingMode = MAUserTrackingModeFollow就可以了
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版地图注记_百度百科
清除历史记录关闭
声明：百科词条人人可编辑，词条创建和修改均免费，绝不存在官方及代理商付费代编，请勿上当受骗。
地图注记是指地图上的标注和各种文字说明，它是地图的基本内容之一如同地图上其他符号一样， 注记也是一种地图符号。地图注记可以分为地名注记，说明注记和图幅注记。地名注记包括地名、河名山名等，其中以地名为主，地名表示正确与否，影响地图能否出版。
地图注记标注介绍
地名混乱和错误标注，将给政治、军事、外交、测绘、邮电、交通和统计等工作带来不便。为此，1960年联合国成立地名专家组，负责指导地名标准化工作。1975年，我国参加了联合国地名机构。1977 年的联合国第三届地名标准化会议上，通过了我国提出的“采用汉语拼音作为中国地名罗马字母拼写法的国际标准”的提案。同年，我国成立地名委员会，各省、市、县也都设立了相应机构
为了克服地名混乱现象，根据1979 年第一次全国地名工作会议的要求，在全国范围内开展了以县为单位的地名普查工作,对地名的标准称谓、位置、地名来历、含义、历史沿革，以及地名与社会、经济、文化和地理环境的关系进行了彻底的调查。调在中对历史遗留下来有损于我国领士主权、妨碍民族团结、违背国家政策的地名，对有地无名、有名无地、重名,对少数民族地名音译不准等逐一改正,实现地名标准化和规范化，为在地图上正确标注地名提供依据。因此，地名书写是严肃的制图过程。
地图注记字大
重要性和数量等级，一定程度上反映被注对象的重要性和数量等级。
地图注记字隔
接近&1mm、普通1-3、隔离字大的1-5倍
A.点状地物：接近间隔
B.线状地物：沿走向注出，可分段重复标注
C.面状地物：视面积大小而定，可重复注出
因此，地图注记的字隔隐含所注对象的分布特征。
注记字隔是字的间隔离的比较远，且排列间隔要随着被注记要素的长度而变化。在地形图上规定为字大的三倍至五倍。在一般专业图上有的要更远些。但是间隔必须近似相等。河流、山脉等线状地物；区域性名称注记如省、地区、县的名称，大都是采用这种字隔来排列。
地图注记字向
注记的文字在地图中方向
斜立:往往随被说明要素走向而异 。 如街道名称注记，河流注记等。等高线高程注记的字头，规定朝向高处。
※ 地图上应避免出现倒立字向！
地图注记字位
注记的文字或数字相对被说明要素的位置
注记与所注对象保持适当间隔，不能相互压盖，最好注在空白处。
字位的选择是以明确显示被注对象为原则
地图注记字顺
字顺是指同一注记中各字的排列顺序。
地图上的注记采用从左至右和从上而下的字顺
地图注记字列
同一注记的排列形式
A.水平字列
B.垂直字列 点状地物
C.雁形字列：标注山脉名称
D.屈曲字列：标注河流、道路名称 线状地物
地图注记由字体、字大或字级、字色、字隔及排列方向、位置,5个因素构成。用不同字体和颜色区分不同事物；用注记的大小等级反映事物分级以及在图上的重要程度；用注记位置以及不同字隔和排列方向表现事物的位置、伸展方向和分布范围。地图注记主要由照相排字或激光排字而得。注记设计和剪贴，要求字形工整、美观、主次分明、易于区分、位置正确。
地图注记功能
标识各对象
指示对象的属性
表明对象间的关系
转译 ：利用文字将地图符号的意义表达出来
地图注记分类
①专有名称注记。如居民地、河流、山脉、海洋等；
②说明注记。常用来补充说明地物性质，如树种、井泉性质以及图例说明、图名、比例尺等；
③数字注记。标明地物的数量特征，如高程、等值线数值、道路长度和航海线里程等；
④专题地图的图例代号和文字符号。
地图注记注记的布置
互不混淆；
不压盖重要地物：
符合规范或习惯
图面注记的密度与被注记地理事物的密度一致
不同类型注记的具体要求
A专有名称注记　
1.居民地:县以上粗等线体,以下细或宋体.水平,右方或上方.字隔据形状.如图廓间,细等线体,接近字隔.
2.道路:城镇道路用细等线体标出,字大据路面宽度,隔离字隔沿街道走向排列,街道中心,铁路公路地形图中无严格要求,在土地图中需.
3.水系:左斜宋体字,河流与运河名隔离字隔和雁行字列注在河内部,较窄的河在水涯线的上方或右侧,但不能压盖水涯线和沿岸重要符号.字隔最大不超过字大的4倍,短小河流可注在河流中段,比较长的河流每隔15-20cm重复注出,湖泊或水库沿形状的最长方向注,如果面积小容不下,注于上方或右方.
4.山名.山顶名称用长中等线体注记,接近字隔,水平字列,注于山头的上方,高程注记在右方，注在最高的山头.山脉、山岭名称用耸肩等线体，隔离字隔,雁行排列，顺着山脉山岭的延伸方向注在中心线位置上。
B 说明注记
符号旁说明注记用细等线体，接近字隔，以水平字列为主，注在轮廓符号内部，必须紧靠符号。
高程注记：用直立等线阿拉伯数字，接近字隔，水平字列，一般标注在测定点右侧。
等高线注记：一般注加粗等高线，如稀少可注于首曲线。高程注记应沿着等高线斜坡降落方向
字位选在斜坡凸棱上，数字中心线应与等高线方向一致，并且中断等高线，字头朝向山顶。
朱良，周占鳌等．新编地图学教程：高等教育出版社，2000年：183-183
．中国知网．&#91;引用日期&#93;
．中国知网．&#91;引用日期&#93;
．中国知网．&#91;引用日期&#93;
本词条认证专家为
副教授审核
中国矿业大学
清除历史记录关闭}