1. 程式人生 > >java呼叫高德地圖API開發,高德線上地圖開發——未完待續

java呼叫高德地圖API開發,高德線上地圖開發——未完待續

這是目錄

一、引入高德地圖API

二、高德地圖開發

1、定義一個div來存放地圖

2、生成地圖

3、新增一個跳躍的點

4、新增控制元件

5、有其他需要的請留言


一、引入高德地圖API

 

高德地圖官方示例:https://lbs.amap.com/api/javascript-api/example/map/map-show

 

前臺呼叫高德地圖開發之前要先引入,高德地圖API,

<script src="https://webapi.amap.com/maps?v=1.4.10&key=您申請的key值"></script>

“您申請的key值”需要到高德地圖申請;https://lbs.amap.com/dev/key/app

 

二、高德地圖開發

1、定義一個div來存放地圖

 

<body>

    <div id="gaode_map"></div>

</body>

2、生成地圖

<script type="text/javascript">

 var map = new AMap.Map('gaode_map', {

        resizeEnable: true, //是否監控地圖容器尺寸變化
        zoom:11, //初始化地圖層級
        center: [116.397428, 39.90923] //初始化地圖中心點
    });

</script>

3、新增一個跳躍的點

   var marker = new AMap.Marker({//定義一個點
        position: map.getCenter(),
        draggable: true,
        cursor: 'move'
    });
    marker.setMap(map);
    // 設定點標記的動畫效果,此處為彈跳效果
    marker.setAnimation('AMAP_ANIMATION_BOUNCE');

4、新增控制元件

    var scale = new AMap.Scale({//定義比例尺
        visible: true
    }),
    toolBar = new AMap.ToolBar({//定義工具條
        visible: true
    }),
    overView = new AMap.OverView({//定義方向盤
        visible: true
    }),
    map.addControl(scale);//新增比例尺
    map.addControl(toolBar);//新增工具條
    map.addControl(overView);//新增方向盤

5、有其他需要的請留言