在高德地图中添加坐标点

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <!--的图标字体库-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        .marker {
            color: #ff6600;
            padding: 4px 10px;
            border: 1px solid #fff;
            white-space: nowrap;
            font-size: 12px;
            background-color: #0066ff;
        }
        .amap-icon img{
            display: none;
        }
        .icon{
            position: absolute;
            top: 0;
            left:0;
            z-index: 99;
        }
        .icon span{
            font-size: 28px;
        }

    </style>
    <script src="http://webapi.amap.com/maps?v=1.4.0&key=YourKeyName"></script>
    <!--添加缩放条<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>-->
    <script src="../js/jquery.min.js"></script><!--引入js文件-->
</head>
<body>
<div id="container"></div>
<div  class="button-group">
    <input type="button" class="button" value="添加点标记覆盖物" id="addMarker"/>]

    <input type="button" class="button" value="更新点标记覆盖物" id="updateMarker"/>
    <!--
    <input type="button" class="button" value="删除点标记覆盖物" id="clearMarker"/>
    -->
</div>
<script>
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [112.32, 28.60],//中心点
        zoom: 13
    });
    //添加点
    AMap.event.addDomListener(document.getElementById('addMarker'), 'click', function() {
        addMarker();
    }, false);
    //更新点
    AMap.event.addDomListener(document.getElementById('updateMarker'), 'click', function() {
        marker && updateMarker();
    }, false);
    //删除点
//    AMap.event.addDomListener(document.getElementById('clearMarker'), 'click', function() {
//        if (marker) {
//            marker.setMap(null);
//            marker = null;
//        }
//    }, false);



    // 实例化点标记

 function addMarker() {
      //map.setZoom(19);//设置缩放范围;参数范围0-19,0是最大最粗略,19是最小最精确
     // AMap.convertFrom() 将gps坐标转化为高德坐标
     //maker添加点
    AMap.convertFrom('119.31,58.5953','GPS',function(status, result) {
        console.log(result.locations[0].lng+","+ result.locations[0].lat);
        //设置图标的颜色
        $(".amap-icon img").replaceWith("<div class='icon' style='color: #0066ff'><span class='fa fa-map-marker'></span></div>");
        marker = new AMap.Marker({
          //icon: "../images/location_fill_blue_20.png",
          // icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position:[result.locations[0].lng, result.locations[0].lat]
        });
        marker.setMap(map);
    });

 }

</script>
</body>
</html>

参考链接:

1.gps数据转高德数据:http://lbs.amap.com/api/javascript-api/reference/lnglat-to-address/#m_AMap.convertFrom

2.高德点标记API:http://lbs.amap.com/api/javascript-api/example/marker/marker-content

3.一套绝佳的图标字体库和CSS框架:http://fontawesome.dashgame.com/

4.RGB颜色查询对照表:http://www.114la.com/other/rgb.htm


发布了99 篇原创文章 · 获赞 78 · 访问量 25万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览