本文章是出行助手项目使用高德API的一些经验,见程序代码及注释,
详情请查看高德API
高德地图初始化加载定位到当前城市(具体位置):
- 设置一个div挂载高德地图:
<div id="map" style="width:900px; height: 900px;border: 1px solid red"></div>
- 引入高德API:
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=****申请到的KEY值****"></script>
创建地图并初始化到具体位置:
function createTrip() {
// 创建地图实例,创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性:
map = new window.AMap.Map('map', { //构造一个地图对象,第一个参数中传入地图容器DIV的ID值,第二个参数是地图初始化参数对象,参数详情参看MapOptions列表。
resizeEnable: true, // 是否监控地图容器尺寸变化
// mapStyle: 'amap://styles/light', // 设置地图的显示样式
zoom: 11, // 初始化地图层级
// viewMode: '3D', // 地图模式
// pitch: 75, // 地图俯仰角度,有效范围 0 度- 83 度
center: [116.402831,39.91582] // 初始地图中心点,故宫
})
// 异步加载多个插件:AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。
// 地图初始化加载的定位只能获取到城市级别信息,如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位
// 组合了旋转、倾斜、复位、缩放在内的地图控件
map.plugin(['AMap.Geolocation', 'AMap.ControlBar'], function () {
var geolocation = new window.AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位,默认:true
timeout: 10000, // 超过10秒后停止定位,默认&