最近在做一个网站,需要嵌入经销商的位置和信息。搜索了很多资料,终于完成了功能,给大家分享一下。 to1r
88X
地图功能:按标尺缩放,鼠标滑动缩放,添加标注和 信息。 .N#KW
具体步骤: zuFPG{^\#
1:首先到百度地图API,申请密钥。(如果没有百度账户得先注册一个) E`C!q
X>
2:百度地图API的功能做得比较分散,像标注、缩放等都是需要自己一步步找代码的。我把代码整理了一下,给大家复制一下,应该是最简洁的了 9`"#OQPn1
<head> {9Ok^O
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> jT F"
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=申请的密钥"></script> KDV.ZSF7
</head> 3J/l>1[
<body> ?|
6sTu!
<div style="width:500px;height:500px;margin:0 auto" id="allmap"></div> BJ'pe[Xa5
<script type="text/javascript"> [f[Wz{Q#Y
var map = new BMap.Map("allmap"); l]Ym)QP
var point = new BMap.Point(116.384, 39.987); // 需要标注的位置的经纬度 |b^UPrz)VS
map.centerAndZoom(point, 15); // 中心位置和缩放倍数 Y7I\<JG<
map.enableScrollWheelZoom(); // 添加滚动轴 &h!O<'*2
map.addControl(new BMap.NavigationControl()); // 添加左上角的标尺工具 P3Vh|<'7
map.addControl(new BMap.NavigationControl()); B(} 'yY@%u
map.addControl(new BMap.ScaleControl()); OQKc_z'"
map.addControl(new BMap.OverviewMapControl()); R(8?9-w
map.addControl(new BMap.MapTypeControl()); 59"tHb6 E
map.setCurrentCity("北京"); "Y4glomR[
m~P30)
var opts = { k\dPF@~Hvl
width : 200, // 信息窗口宽度 ]ZW-`U MO
height: 20, // 信息窗口高度 ]$sb<o
.a
title : "健翔桥东华亭家园" // 信息窗口标题 JR&yaOws
} <%rm?;PBl
var infoWindow = new BMap.InfoWindow("xxx公司", opts); // 创建信息窗口对象 wf\7sz
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 ~Je40vO[
var marker = new BMap.Marker(point); // 创建标注,即地图上的小红点 EAxdF
u
map.addOverlay(marker); A;&YPHB
</script>