高德 开发 地图 JS API 开发指南 其他功能 调起高德地图

更新时间:2017年05月23日

亲手试一试

JavaScript API在MarkerMapPlaceSearchDrivingTransferWalking这些类中提供了调起高德地图的方法,在移动设备上这些接口将尝试调起高德地图客户端的对应功能界面,使得JSAPI的开发者可以充分利用高德地图提供的路线规划、导航、POI详情页、位置分享等丰富功能

场景一、调起高德地图的路线规划功能

导航是目前JavaScript API无法覆盖到的高德地图客户端的重要功能,目前高德地图提供了驾车、公交、步行三种方式的导航服务,JavaScript API在Driving、Transfer、Walking三个路线规划插件类中提供了相关功能调起接口,使用这些接口开发者可以在Web页面中直接打开客户端的路线规划结果界面,也可以看到客户端提供的策略更丰富的路线规划结果,只需要点击一下便可以开始导航。想要实现这个功能只需要两步:

加载路线规划插件并创建对象

这里我们以驾车路线规划为例,加载Driving插件,创建Driving对象,同时设置驾车策略为最短时间:

AMap.plugin(["AMap.Driving"], function() {
    var drivingOption = {
        policy:AMap.DrivingPolicy.LEAST_TIME,
        map:map
    };
    var driving = new AMap.Driving(drivingOption); //构造驾车导航类
});

调用searchOnAMAP方法

Driving对象创建完毕之后,只需要在需要的地方调用searchOnAMAP方法就可以了,下面代码中是在button的点击事件中调用的。searchOnAMAP方法接收一个JSON对象参数,对象中需要指定路线规划的起终点坐标,同时也可以设定起终点名称,示例代码中我们利用了JavaScript API路线规划的结果数据中的起终点坐标。调起高德地图客户端之后,只要点击‘开始导航’就可以使用导航功能了:

//根据起终点坐标规划驾车路线
driving.search(
    [{keyword:'北京站'},{keyword:'北京大学'}],
    function(status,result){
        button.onclick = function(){
            driving.searchOnAMAP({
                origin:result.origin,
                destination:result.destination
            });
        } 
    });

场景二、在高德地图上展示Marker点或者POI标记

在一些基于位置分享的应用开发中,我们会在地图上标记marker点或者使用地图上的poi点,这时候如果能在高德地图客户端展示这个位置的话,用户就可以使用导航或者路线规划等功能前往指定地点,起到引导用户前往的作用,因此JavaScript API提供的调起高德地图并显示点标记或者poi点的功能,以满足此类需求。

点标记位置展示

通常我们都使用Marker点来进行位置的标定,所以JSAPI在Marker类中提供了markOnAMAP的方法,这个方法接受一个JSON对象参数,参数对象包含position和name两个属性,调起之后将在高德地图客户端或者Web站点标记显示对应的Marker点,基于marker点的展示,用户可以接着使用周边搜索、路线规划和导航等功能。扫描右侧二维码,点击地图中见的marker点查看移动端调起来效果。

var marker = new AMap.Marker({
    position:[116.473188,39.993253]
});

marker.markOnAMAP({
    position: marker.getPosition(),
    name:'首开广场'//name属性在移动端有效
})

POI位置展示或详情页展示

marker的标记通常用于没有被高德地图收容的一般位置展示,对于已经被高德地图收容的位置点,我们可以使用Map类的poiOnAMAP方法在高德地图显示,或者detailOnAMAP方法在高德地图显示其详情页。使用JSAPI有两种方式获取POI的信息:一种是使用热键功能,只要将地图的isHotspot属性设置为true,监听hotspotclick等事件就可以获取到用户当前在地图上点击的poi点;另一种方式是使用PlaceSearch插件通过搜索的方式来获取POI点的信息。下面的示例代码使用了热键返回的poi信息:

map = new AMap.Map("mapContainer", {
        isHotspot:true
});
map.on('hotspotclick',function(e){
    map.poiOnAMAP({//在高德地图打开POI展示页面
        name:e.name,
        location:e.lnglat,
        id:e.id
    })
})

我们也可以通过PlaceSearch的POI搜索功能来获取相关POI的信息然后调起高德地图,为了方便某些只使用搜索服务而不使用地图的开发者,我们在PlaceSearch类中同样提供了poiOnAMAP和detailOnAMAP方法。POI搜索放回的POI对象的结构和这两个方法的参数结构是兼容的,所以可以直接将搜索结果中的POI对象作为参数传入,也可以重新构造参数。扫描右侧二维码点击图中marker看看:

AMap.plugin('AMap.PlaceSearch',function(){
   var placeSearch = new AMap.PlaceSearch({
       city:'010'
   })
   placeSearch.search('博物馆',function(status,data){
       if(status!=='complete')return;
       var pois = data.poiList.pois;
       for(var i = 0; i < pois.length; i += 1){
         var marker = new AMap.Marker({
         content:'<div class="marker">'+i+'</div>',
         position:pois[i].location,
         map:map,
       })
       marker.poi = pois[i];
           marker.on('click',function(){
               map.poiOnAMAP(this.poi)//直接使用poi对象作为参数
           })
       }
       map.setFitView();
   })
    })
移动端
示例中心
功能
在线体验
常见问题