(1)引入高德的url,需要提前申请key。
(2)在页面中写一个div,起一个id。
(3)创建一个map对象,用之前的id。
var map= new AMap.Map('id',{
center:[111,111],//中心位置坐标
zoom:15//地图缩放
});
这几步就可以显示出地图,随后可以创建marker、title等添加在地图上。
给map添加一个marker:
map.add(marker);//将创建好的marker放到地图上面
marker:
var marker = new AMap.Marker({
position:map.getCenter(),//标记的位置坐标
offset:new AMap.Pixel(-10,-10),//标记相对位置的偏移,对应style的left和top
icon:ico,//创建好的icon,也可以在后面使用setIcon()方法添加
zoom:13
});
给marker添加标签:
marker.setTitle("我们的位置");
marker.setLabel({
offset: new AMap.Pixel(10,30),
content: "我们的位置"
});
icon:
var ico = new AMap.Icon({
size: new AMap.Size(24, 30), // 图标尺寸
image: '图标图片的路径', // Icon的图像
imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.Size(24, 30) // 根据所设置的大小拉伸或压缩图片,对应style的width和height
});