Advertisement

在高德地图中添加坐标点

阅读量:
复制代码
    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_ 4**px** 10**px** ;
            _border_ 1**px solid** #fff;
            _white-space_**nowrap** ;
            _font-size_ 12**px** ;
            _background-color_ #0066ff;
        amap-icon img _display_**none** ;
        icon _position_**absolute** ;
            _top_ 0;
            _left_ 0;
            _z-index_ 99;
        icon span _font-size_ 28**px** ;
        **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 "container", : true,
        : 112.32, 28.60,//中心点
        : 13
    ;
    //添加点
    'addMarker', 'click', functionaddMarker;
    , false;
    //更新点
    'updateMarker', 'click', functionmarker && ;
    , 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添加点
    '119.31,58.5953','GPS',function _status_ , _result_ _result_ 0+","+ _result_ 0;
        //设置图标的颜色
        ".amap-icon img"replaceWith"<div class='icon' style='color: #0066ff'><span class='fa fa-map-marker'></span></div>";
        marker = new Marker//icon: "../images/location_fill_blue_20.png",
          // icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            :_result_ 0, _result_ 0;
        markermap;
    ;
    
     **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

全部评论 (0)

还没有任何评论哟~