地图API学习(1) 引入和初始化

1、引入Api

<script src="http://union.mapbar.com/apis/maps/free?f=mapi&v=31.3&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZZauxlDz7C7DD9ZCFGT="></script>

使用地图，就必须引入封装好的地图API库。
2、初始化。

maplet = new Maplet("mapbar");maplet.centerAndZoom(new MPoint(116.38672,39.90805), 8);maplet.addControl(new MStandardControl());

3、事件。
一般的dom事件监听是：addEventListener。
而地图的事件监听是：addListener。
地图事件的定义格式：

MEvent.addEventListener(maplet,"click",()=>{    alert("地图的点击事件触发！");})

地图的一项重要功能是移动地图，这个监听事件是pan。示例如下：

MEvent.addListener(maplet,"pan",function () {     var center = maplet.getCenter();     var msg = "当前地图中心点：" + center.pid;     document.getElementById("message").innerHTML = msg;})

其中有个接口，getCenter(),用于获取地图中心点的一个对象。获取坐标点的方式是这个对象的pid属性。

4、maplet的”pan”事件，在事件回调的事件对象，会携带一个代表地图中心点的MPoint对象。

5、控件
第一、平移/缩放控件，可以对地图进行上下左右四个方向的平移、缩放和测距操作，也叫“鱼骨控件”。

maplet.addControl(new MStandardControl());

设置鱼骨的显示状态

function setControlVisible(visible){    maplet.showControl(visible);}

第二、比例尺控件

maplet.showScale(visible);//visible值为true或者false

第三、缩略图控件

maplet.showOverview(visible,state);//state：true,最大化。false，最小化。

6、叠加物
地图API有这样的几种叠加物：
第一、信息窗口是一种特殊的叠加物，它必须依附在另外一种叠加物上（标注或者折线），不能单独显示在地图上。
第二、地图上的点使用标注（Marker）显示。标注是类型为MMarker的对象。
第三、地图上的线使用折线（Polyline）显示。线是类型为MPolyline的对象。

7、叠加物之信息窗口
第一步、创建Marker对象。

var marker = new MMarker(new MPoint(116.38749,39.90515),new  MIcon("../images/tb1.gif",32,32),new MInfoWindow("信息窗口标题"，"信息窗口内容"))；

第二步、标注对象添加到地图上

maplet.addOverlay(marker);

第三步、显示信息窗口控件

marker.openInfoWindow();

8、叠加物之编辑标注
标注对象在编辑状态下，可以进行拖拽操作。MMarker.setEditable()方法将标注对象设置成可编辑状态。

Maplet对象的edit事件侦听器，并访问事件参数以获取标注对象。

var marker = new MMarker(new MPoint(116.42585,39.91111),new MIcon("Images/abc.jpg",32,32,16,32));maplet.addOverlay(marker);marker.setEditable(true);MEvent.addListener(maplet,"edit",dragEnd);function dragEnd(overlay) {    setTimeout(function () {        alert("新的经纬度位置：" + overlay.pt.pid);        overlay.setEditable(true);    },500)}

9、叠加物之折线
第一步、创建折线对象

var ployline = new MPloyline([new MPoint(116.33217,39.94761),new MPoint(116.43707,39.9429),new MPoint(116.44206,39.87544),new MPoint(116.33924,39.86687)],new MBrush(),new MInfoWindow("标题"，"content"));

第二步、添加到地图

maplet.addOverlay(polyline);

10、MBrush对象
MBrush对象可以为折线自定义颜色、样式、粗细和透明度。

var brush = new MBrush("green");brush.arrow = true;brush.style = 1;brush.stroke = 10;brush.fill = true;brush.bgcolor = "black";brush.bgtransparency = 35;