您的位置：首页 > 其它

在高德地图中添加坐标点

2017-10-17 13:37 239 查看

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 高德地图高德地图api 地图画点

相关文章推荐

新的分享

章节导航