• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

高德地图的插件怎么设置_CSS学习

当前位置：网站建设 > 技术支持

高德地图的插件怎么设置？

准备页面

在正式开始开发地图应用之前,您需要做如下几步:

1 在高德地图官网注册一个账号

2 申请JSAPI的开发者Key

申请地址：

http://lbs.aMap.com/dev/key

引入高德地图JavaScript API入口脚本:

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

创建地图容器

在页面body里你想展示地图的地方创建一个div 容器，并指定id标识:

<div id="container"></div>

指定容器大小

使用CSS为地图容器设置合适的大小，比如:

#container {width:300px; height: 180px; }

创建地图

做完简单的准备工作之后，就可以开始创建地图了.

按照默认属性创建地图

生成一副简单地图只需要一句代码，将我们刚刚创建的div的id传给Map的构造函数即可，这个时候API将根据用户所在的城市自动进行地图中心点和级别的设定：

var map = new AMap.Map('container');

设定地图的中心点和级别

我们一般需要给地图按需设定中心点和坐标等属性，这里可以通过两种方式，第一种，直接在地图初始化的时候传入相关属性，center属性的值可以使经纬度的二元数组，也可以是AMap.LngLat对象，要求经度值在前，纬度值在后：

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

zoom: 10,

center: [116.39,39.9]});

也可以在地图初始化过后，任何需要的地方通过方法来改变地图的中心点和级别

var map = new AMap.Map('container');

map.setZoom(10);

map.setCenter([116.39,39.9]);

添加点标记

创建好地图之后，我们就可以在地图上添加点标记了，用来标注任何用户感兴趣的位置和信息，这里使用到了AMap.Marker这个类。

点标记的创建与添加

同地图一样，点标记可以在创建的时候设定位置等属性，如果设定了map属性的话，marker点将被立即添加到地图上：

var marker = new AMap.Marker({

position: [116.480983, 39.989628],

map:map

});

也可以在创建之后按需更改这些属性:

var marker = new AMap.Marker();

marker.setMap(map);

点标记的移除

移除的话，同样使用setMap方法,不传参数或者传入空参数：

marker.setMap();

添加信息窗体

我们也可以用信息窗体InfoWindow类来向用户展示一些更详细的信息，比如点击一个点标记后，通过信息窗体来展示这个点标记在哪里

信息窗体的创建与设定

信息窗体一样可以在创建的时候设定内容、偏移量、大小等属性，offset是信息窗体的锚点以position为基准位置的像素偏移量，content除了使用字符串的形式外也可以直接设定为某个创建好的DOM节点：

var infowindow = new AMap.InfoWindow({

content: '<h3>高德地图</h3><div>高德是中国领先的数字地图内容、导航 和位置服务解决方案提供商。</div>',

offset: new AMap.Pixel(0, -30),

size:new AMap.Size(230,0)

})

也可以在创建之后按需更改这些属性:

infowindow.setSize(new AMap.Size(150,50));

var contentDiv = document.createElement('div');

contentDiv.innerText='我是信息窗体';

infowindow.setContent(contentDiv);

如何打开信息窗体

我们可以在信息窗体创建之后立即调用其open方法将它显示在需要的位置：

infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));

也可以通过事件监听，在需要的时候才将信息窗体显示出来,比如在marker被单击的时候显示

var clickHandle = AMap.event.addListener(marker, 'click', function() {

infowindow2.open(map, marker.getPosition())

})

当不再需要点击marker显示信息窗体这个功能的时候，可以通过如下方式移除事件绑定

AMap.event.removeListener(clickHandle);

使用高级信息窗体

除了普通的信息窗体，我们还提供了封装了周边搜索和路线规划功能在内的高级信息窗体，要使用高级信息窗体，首先需要通过plugin方法加载该插件，然后就可以和普通信息窗体一样进行创建和打开了。如果为高级信息窗体制定了panel属性，将在以panel的值为id的div上显示周边搜索或者路线规划的结果，如果需要对高级信息窗体和panel内容的样式进行修改，可以对相应classname的css进行重写：

AMap.plugin('AMap.AdvancedInfoWindow',function(){

var infowindow = new AMap.AdvancedInfoWindow({

content: '<h3 class="title">高德地图</h3>'+

'<div class="content">高德是中国领先的数字地图内容、'+

'导航和位置服务解决方案提供商。</div>',

offset: new AMap.Pixel(0, -30),

asOrigin:false

});

infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));

})

添加工具条和比例尺

高德地图JSAPI提供了大量丰富的功能控件和服务插件，下面我们来给上面做好的地图添加两个常用的控件，工具条和比例尺。

添加

添加控件的时候首先需要加载插件,同时需要多个插件的时候第一个参数可以设定为控件名称的数组

AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){

//TODO 创建控件并添加

})

在回调函数里我们来进行控件的生成和添加:

AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){

var toolBar = new AMap.ToolBar();

var scale = new AMap.Scale();

map.addControl(toolBar);

map.addControl(scale);

})

移除

要移除控件的时候调用地图的removeControl方法即可

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。