地图组件demo

高德地图API（demo未完善）

1：声请JSAPI的key值：
http://lbs.amap.com/dev/#/（已声请key名称：demo-javascipt key:7cbbed2d9a0c0319d13d77bf768d5471）
2：引入：
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
3：在body里面创建一个容器：
<div id="container"></div>
4：JS代码初始化地图：
var map = new AMap.Map('container');一句代码就创建了一个地图
5：设定地图的中心店和级别（基础属性）：
var map = new AMap.Map('container',{
zoom: 15, //地图的缩放大小
center: [104.06,30.626], //经纬度（经度，维度）
rotateEnable:true, //地图旋转
doubleClickZoom:true, //是否可以双击变大
mapStyle:"light" //地图样式normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm样式)
});
6：创建定位点（及弹跳效果）：
var marker = new AMap.Marker({
position: [104.06650186,30.62539379],
map:map
}); //创建定位点
// 设置点标记的动画效果，此处为弹跳效果
marker.setAnimation('AMAP_ANIMATION_BOUNCE'); //设置点的弹跳效果
7：添加圆圈的范围：
var circle = new AMap.Circle({
center: [104.06650186, 30.62539379],
radius: 200, //直径
fillOpacity:0.1, //透明度
fillColor: "white", //填充颜色
strokeColor: "#1BB8ED", //线颜色
strokeWeight:1 //外圈线
}) //初始化范围圆
circle.setMap(map); //创建范围圆
8：创建信息窗体：
var infowindow = new AMap.InfoWindow({
content: '<h3>Company Address</h1>' +
'<div>Yu jie ni home bridge east court number one</div>',
offset: new AMap.Pixel(0, -30), //信息窗体的位置
size:new AMap.Size(230,0) //大小
}) //信息出窗体的初始化
infowindow.open(map,new AMap.LngLat(104.06650186,30.62539379)); //打开信息窗体
var clickHandle = AMap.event.addListener(marker, 'click', function() {
infowindow.open(map, marker.getPosition())
}) //点击打开信息窗体

AMap.plugin('AMap.AdvancedInfoWindow',function(){
infowindow = new AMap.AdvancedInfoWindow({
content: '<div class="info-title">Company Address</div><div class="info-content">'+
'<img src="logo.png">'+
'Yu jie ni home bridge east court number one<br/>'+
'<a target="_blank" href = "http://mobile.amap.com/">Download</a></div>',
offset: new AMap.Pixel(0, -30)
});
infowindow.open(map,[104.06650186, 30.62539379]);
}) //多功能的信息窗体
9：添加工具条及比例尺（放大缩小）
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){}); //初始化工具条和比例尺
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
var toolBar = new AMap.ToolBar();
var scale = new AMap.Scale();
map.addControl(toolBar);
map.addControl(scale);
}) //添加工具条和比例尺
注：修改默认的CSS样式
去掉默认的logo方法是将其隐藏：
.amap-logo {
right: 0 !important;
left: auto !important;
display: none;
}
/*去掉logo*/
.amap-copyright {
right: 70px !important;
left: auto !important;
}
/*去掉默认文字*/

转载于:https://www.cnblogs.com/Beliefblog/p/5996849.html