zoukankan      html  css  js  c++  java
  • web端创建地图

    1》在首部引入标签

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />

    <script src="http://webapi.amap.com/maps?v=1.4.2&key=17c8ae918f4e9d678da9e4c077b3301b"></script>

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

    2》HTML需要的位置

    <!--地图-->
    <div id="container" class="ditu" style=" margin: 0 auto;height:41%;">
    </div>

    3》js中(记得更改需要位置的经纬度center,以及地名)

    //地图
    var map = new AMap.Map('container', {
    resizeEnable: true,
    center: [113.949754,22.550679],
    zoom: 13
    });
    var marker = new AMap.Marker({
    position: map.getCenter()
    });
    marker.setMap(map);
    // 设置鼠标划过点标记显示的文字提示
    marker.setTitle('深圳市南山区科技园科丰路2号特发信息港D栋612');

    // 设置label标签
    marker.setLabel({ //label默认蓝框白底左上角显示,样式className为:amap-marker-label
    offset: new AMap.Pixel(20, 20), //修改label相对于maker的位置
    content: "深圳市南山区科技园科丰路2号特发信息港D栋612"
    });
    以上基本完成,效果图如下啦!!!

    拓展》

    1:高德地图获取当前位置经纬度:http://lbs.amap.com/console/show/picker

    2:高德地图具体代码实现(张国荣):http://lbs.amap.com/api/javascript-api/example/callapp/markonapp

     

  • 相关阅读:
    变量1
    PHP 函数
    发送post请求
    XXE
    CSRF
    Html基础
    暴力破解
    Brup sute
    XSS
    URL 传参转义 (特殊符号转义)
  • 原文地址:https://www.cnblogs.com/Fancy1486450630/p/9018310.html
Copyright © 2011-2022 走看看