HBuilder使用地图（maps）

最近捣鼓了一下HBuilder的maps，也算爬了点坑，分享给需要的同学

首先说说定位

plus.geolocation.getCurrentPosition( function ( p ) {
  console.info(JSON.stringify(p))
})

打印出来的就是获取到的位置信息，重点说一下coordsType属性，很多同学只注意到经纬度，而忽略了coordsType。coordsType是坐标类型，安卓和iOS获取到的类型都不同（iOS：wgs84， 安卓：gcj02），这很关键，在后面会用到。

现在该创建地图了，直接上代码

var pcenter = new plus.maps.Point(point.longitude, point.latitude); // 地图中心点
var map = new plus.maps.Map('map');
map.centerAndZoom(pcenter, 15); // 设置地图的中心点和缩放级别
map.showUserLocation( true ); // 设置是否显示用户的位置
......  // 还有很多属性可以设置，请参考官方文档

可能看到第一行代码您就觉得有问题，point哪儿来的？
不少刚学maps的同学，可能直接把定位获取的经纬度放上去了，那就错了。
因为maps默认是使用百度地图，使用百度地图需要将获取到的坐标转换为百度地图的坐标，所以我们最开始提到的coordsType就起作用了

var point = new plus.maps.Point(p.coords.longitude, p.coords.latitude); // 这里的p就是定位获取的数据
plus.maps.Map.convertCoordinates(point, {coordType: p.coordsType}, function(event){
  var point = event.coord;  // 转换后的坐标值，上面创建地图就是用的这个point
})

顺便提一下位置监听API

plus.geolocation.watchPosition(function(a){ // 位置一旦发生变化，就会触发该回调方法
  console.info(JSON.stringify(a));
}, function(e){
  alert('Geolocation error: ' + e.message);
});

在地图上添加覆盖物

我们来做个例子，先创建一个Marker，再将Marker添加到地图上

var marker = new plus.maps.Marker(new plus.maps.Point(point.longitude, point.latitude)); // 这里的point是坐标转换之后的
marker.setIcon("/img/pic.png");//这里放你的图片
marker.setLabel('测试');
var bubble = new plus.maps.Bubble(""); // 气泡对象(点击Marker之后显示，这里有点坑，只能添加字符串，不能添加html)
marker.setBubble(bubble);
map.addOverlay(marker);
marker.onclick = function ( marker ) {
   // 点击marker触发
}

搜索并添加路线

有新同学想添加路线，就直接去创建Route对象，但是发现地图上根本就没有成功添加路线。很纳闷儿到底是哪儿出错了？
其实添加路线并不是创建Route对象，而是根据两点，搜索路线，然后通过添加覆盖物的方式添加路线。

var searchObj = new plus.maps.Search( map );  // 创建地图检索对象
searchObj.onRouteSearchComplete = function ( state, result ) { // 线路检索完成事件
  console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
  if ( state == 0 ) {
    if ( result.routeNumber <= 0 ) {
      alert( "没有检索到结果" );
    } else {
      map.addOverlay( result.getRoute( 0 ) );
    }
  } else {
    alert( "检索失败" );
  }
}
searchObj.drivingSearch( point, "", new plus.maps.Point(Client.log,Client.lat), "" ); // drivingSearch是驾车路线（也有公交和步行路线，请自行查看官网文档，参数是1:起点(Point对象)，2:起点城市(可不填), 3:终点(Point对象), 4:终点城市(可不填)）

这些都是比较常用的maps API，这些都搞懂了，再去看其他maps API都不是问题了，希望能帮到同学们。