html前端使用高德地图入门教程 |
您所在的位置：网站首页 › 高德地图咋下载自己的店铺地址 › html前端使用高德地图入门教程 |
html前端使用高德地图入门教程
|
文章目录
开始准备工作注册Key前期页面上的准备
插件使用插件使用步骤引入插件
定位自定义地图显示位置和缩放级别自定义坐标和缩放级别获取定位信息（需要使用插件）浏览器定位定位到当前位置IP定位获取当前城市信息
覆盖物添加覆盖物点标记灵活点标记导航海量点标记MassMarks
获取覆盖物覆盖物的操作
图层设置图层获取图层移除图层添加实时路况图层添加卫星图层
3D地图信息窗体（自定义信息窗体）创建信息窗体实例设置窗体内容（可以使用css控制样式）打开信息窗体关闭信息窗体
未完待续...
开始
准备工作
注册Key
如果开发者账号包括Key已经有了，请忽略此步骤 首先，注册开发者账号，成为高德开放平台开发者 登陆之后，在进入「应用管理」 页面「创建新应用」 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 记住这个Key，等会要用，以后可能也会用，一定要记住。 前期页面上的准备此时距离你的页面上出现地图，已经更近了一步 新建一个DIV，作为地图的容器（这一步和使用其他插件一样，必须新建一个挂载点）。给这个新建的div设置好宽高（这里提醒一下，可以使用弹性布局，没有影响）。在body后面引入高德地图的js。最后，异步初始化高德地图插件，一定要异步，使用window.onLoad。 //新建一个容器 //设置宽和高 #wrapper{ width: 500px; height: 500px; } //引入js * 这里需要刚才申请的Key //初始化地图插件 window.onload = function(){ var map = new AMap.Map('wrapper'); }
地图本身功能有限，很多地方需要使用插件满足自己的需求 插件使用步骤 引入插件创建插件实例调用插件方法 引入插件1.异步引入插件（推荐这种） //引入单个插件 AMap.plugin('AMap.ToolBar',function(){//异步加载插件 var toolbar = new AMap.ToolBar(); map.addControl(toolbar); }); //引入多个插件 AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件 var toolbar = new AMap.ToolBar(); map.addControl(toolbar); var driving = new AMap.Driving();//驾车路线规划 driving.search(/*参数*/) });2.同步引入插件（不推荐使用，就不讲了） 定位如果在地图初始化时不配置中心点，和缩放级别，这个时候地图上面默认是你所处的位置，缩放级别也是默认的 PC端默认是IP定位，如果IP定位无法使用则会自动切换到浏览器定位 移动端默认是浏览器定位，如果浏览器定位无法使用则会自动切换到IP定位 自定义地图显示位置和缩放级别 //对于地图的自定义，属性有很多，只列举三个 var map = new AMap.Map('container', { zoom:11,//缩放级别 center: [116.397428, 39.90923],//地图显示中心点坐标，如果没有center属性，则会定位到你当前所处的位置 viewMode:'3D'//使用3D视图 }); 自定义坐标和缩放级别 //设置地图显示的中心点 map.setCenter([116.397428, 39.90923]); //设置地图显示中心点，并缩放到指定级别 map.setZoomAndCenter(16, [116.397428, 39.90923]); 获取定位信息（需要使用插件） 浏览器定位 map.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation({ // 是否使用高精度定位，默认：true enableHighAccuracy: true, // 设置定位超时时间，默认：无穷大 timeout: 10000, // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20) buttonOffset: new AMap.Pixel(10, 20), // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false zoomToAccuracy: true, // 定位按钮的排放位置, RB表示右下 buttonPosition: 'RB' }) geolocation.getCurrentPosition() AMap.event.addListener(geolocation, 'complete', onComplete) AMap.event.addListener(geolocation, 'error', onError) function onComplete (data) { // data是具体的定位信息 // 获取当前位置信息 this._position = [data.position.getLng(),data.position.getLat()]; } function onError (data) { // 定位出错 } }) 定位到当前位置点击按钮，定位到当前位置 //根据浏览器定位，已经获取到当前位置信息 map.setCenter(this._position); //如果同时需要缩放到指定缩放级别 map.setZoomAndCenter(13, this._position); IP定位获取当前城市信息 AMap.plugin('AMap.CitySearch', function () { var citySearch = new AMap.CitySearch() citySearch.getLocalCity(function (status, result) { if (status === 'complete' && result.info === 'OK') { // 查询成功，result即为当前所在城市信息 } }) }) 覆盖物目前只用到点标记，所以暂时只讲点标记 添加覆盖物 点标记 使用点标记肯定都是自定义点标记，可以自定义图片，字体等
// 创建样式对象
var styleObject = new AMap.StyleObject({
url: '//vdata.amap.com/icons/b18/1/2.png', // 图标地址
size: new AMap.Size(11,11), // 图标大小
anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
});
// 创建海量点
var massMarks = new AMap.MassMarks({
zIndex: 5, // 海量点图层叠加的顺序
zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
style: styleObject // 设置样式对象
});
// 海量点信息
var data = [{
lnglat: [116.405285, 39.904989], //点标记位置
name: 'beijing',
id:1
}, // {}, …,{}, …
];
massMarks.setData(data);
// 将海量点添加至地图实例
massMarks.setMap(map);
获取覆盖物
//获取所有的覆盖物（点标记，导航等）
that.map.getAllOverlays();
//获取所有的点标记
that.map.getAllOverlays('marker');
这里获取所有的点标记或覆盖物，意思是地图上面所有的添加的点标记或者覆盖物，而不是当前视野范围内的点标记或者覆盖物,如果有需求是获取当前视野范围内的点标记或覆盖物，就需要自己根据这个方法写了。具体什么方法，如果有想了解的，请在下方留言。 覆盖物的操作 1.删除所有覆盖物 // 使用clearMap方法删除所有覆盖物 map.clearMap(); 2.删除点标记 // 单独移除点标记 map.remove(marker); 3.取消导航 //取消导航覆盖物 driving.clear(); //一般覆盖物都会有隐藏和显示的方法，这个可以极大的优化性能，因为增加和删除覆盖物操作非常浪费性能。 4.覆盖物隐藏 marker.hide(); 5.覆盖物显示 marker.show(); 图层 设置图层 // 构造官方卫星、路网图层 var layers = [ new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet() ] // 地图上设置图层 map.setLayers(layers); 获取图层 //获取图层数据 map.getLayers(); 移除图层 // 移除一个图层 // layer1指的是建立图层的变量 map.remove(layer1); 添加实时路况图层
工作中原生的信息窗体往往无法满足需求，此时使用自定义信息窗体。 应用场景：配合点标记使用，鼠标移入或者点击点标记，弹出窗体。
|
【本文地址】
今日新闻 |
推荐新闻 |