• 地图组件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;
    }
    /*去掉默认文字*/

  • 相关阅读:
    HTML5之dir属性
    IPv4地址分类及子网划分
    二叉树的3种遍历
    js的点表示法和方括号表示法
    javascript-数组的常用方法
    第一编博文——漫长编程路
    使用qemu
    initial ram disk
    qemu常见选项解析
    cp和scp
  • 原文地址:https://www.cnblogs.com/Beliefblog/p/5996849.html
Copyright © 2020-2023  润新知