发布：2015/9/9 23:53:09作者：管理员 来源：本站 浏览次数：1762
这一篇我将跟大家分享一下我自己在开发过程中总结出的一些操作地图的方法，属性，及思路，希望可以让大家少走弯路。1.定位
一般百度的示例DEMO里开始初始化地图时用的都是map.centerAndZoom（坐标，放大级数）；其中坐标可以用点代替，也可用字符串代替，而放大级数必须是整数，比如：
var p1=new BMap.Point(108.961605,34.238296);//西安坐标
map.centerAndZoom(p1,15);//或者map.centerAndZoom("西安",15);
但是必须要注意一点，这个点绝对是要用百度的API去实例化，即必须用BMap.Point(经度，纬度)去创造一个点，我在这点上吃了很多苦，有一次直接建立了一个坐标数组就在那读，死活没调通。
如果要重新定位，我建议大家不要在用centerAndZoom了，可以这样：
map.setCenter(“西安");
map.setZoom(15);
2.添加标注(Marker)
添加标注的最基本条件就是添加点坐标，示例如下：
首先必须要加载地图（所有的操作都是在这个的基础上进行的）
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(108.961605,34.238296), 14);
var marker1 = new BMap.Marker(new BMap.Point(108.961605,34.238296)); // 创建标注
map.addOverlay(marker1); // 将标注添加到地图中
若要给标注添加信息框，则继续下面的代码：
var infoWindow1 = new BMap.InfoWindow("普通标注");
//给mark添加鼠标单击事件
marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
百度默认的标注是个红色气球，可以给它换图标：
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("./png.gif", new BMap.Size(300,157));//自己要添加的路径
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
最后为信息框加入点击鼠标事件：
var infoWindow2 = new
BMap.InfoWindow("<p
style='font-size:14px;'>哈哈，你看见我啦！我可不常出现哦！</p><p
style='font-size:14px;'>赶快查看源代码，看看我是如何添加上来的！</p>");
marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow2);});
3.画线
下面是百度的一个小DEMO：
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom("重庆",12); // 初始化地图,设置城市和地图级别。
var pointA = new BMap.Point(106.486654,29.490295); // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467); // 创建点坐标B--江北区
alert('从大渡口区到江北区的距离是：'+map.getDistance(pointA,pointB)+' 米。');//获取2点距离
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线
map.addOverlay(polyline); //添加折线到地图上
</script>
从以上代码中可以得到两个重要的信息：
(1) map.getDistance(点1，点2)；这个函数可以很好的帮助我们算两点的距离，不用自己计算，很方便。
(2) Ployline函数可以帮助我们划线，在这里不难看出它需要的第一个参数是一个点数组，所以在实际项目中可以将数据先放在数组里，然后在传数组名给它即可(注意一定要实例化，即BMap.Point());所以可以利用它来画矩形，多边形等等。。
4.地址解析
function BMap_Geo(detail_address,city)
{
var myGeo=new BMap.Geocoder();
myGeo.getPoint(detai_address,
function(point)
{
if(point)
{
map.panTo(point);
map.addOverlay(new BMap.Marker(point));
}
},city)
}
5.鼠标实时获取坐标
function GetlngAndlat(e)
{if(e.point.lng!=null)
{
document.getElementById("mouselng").innerHTML=e.point.lng;
document.getElementById("mouselat").innerHTML=e.point.lat;
}
}
这些全部都是静态页面的脚本，为了更好的实现，我选择用WINFORM与其交互。下一篇继续。
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4