高德地图添加Marker点标记

示例代码部分：

<!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"/><style>.marker {color: #ff6600;padding: 4px 10px;border: 1px solid #fff;white-space: nowrap;font-size: 12px;font-family: "";background-color: #0066ff;}</style><script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</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: [104.747402,31.46131],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() {if (marker) {return;}marker = new AMap.Marker({icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",position: [104.747402,31.46131]});marker.setMap(map);}function updateMarker() {// 自定义点标记内容var markerContent = document.createElement("div");// 点标记中的图标var markerImg = document.createElement("img");markerImg.className = "markerlnglat";markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";markerContent.appendChild(markerImg);// 点标记中的文本var markerSpan = document.createElement("span");markerSpan.className = 'marker';markerSpan.innerHTML = "Hi，我换新装备啦！";markerContent.appendChild(markerSpan);marker.setContent(markerContent); //更新点标记内容marker.setPosition([104.747402,31.46131]); //更新点标记位置}
</script>
</body>
</html>

代码片分析：

核心部分，如何添加一个点？

实现基本功能的代码：

//这里是设置地图中心点，比如这里选了一个绵阳为中心的坐标var marker, map = new AMap.Map("container", {resizeEnable: true,center: [104.747402,31.46131],zoom: 13});window.onload = function(){addMarker();}// 实例化点标记function addMarker() {if (marker) {return;}marker = new AMap.Marker({icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",position: [104.747402,31.46131]//在这里设置需要打点的坐标});marker.setMap(map);}

附加：怎么添加获取地图上的坐标点？高德地图工具
http://lbs.amap.com/console/show/picker

讲获取的店坐标拷贝到示例代码此处：

保存，运行，地图上出现Marker点

高德地图添加Marker点标记相关推荐

只用一个marker 替换高德_关于高德地图添加Marker遇到的一些坑
最近有一个需求,是一个出行类的App,需要在乘客下单后在地图上显示乘客的头像以及司机的头像. 这时候就需要在地图上插上一个marker ImageLoader.loadLisenter(mContex ...
高德地图添加瓦片图层
高德地图添加瓦片图层 1.准备图层图片 2.将图片根据使用地图切割为相应的瓦片工具:高德切图工具地址:高德地图切图工具: 高德地图切图工具也可使用付费工具:MapCutter 下载zip文件,运 ...
html地图添加marker,谷歌地图 API 开发之添加标记
创建地图之后,基本上都需要标记位置的,就是那个圆点.然后参考谷歌的API,找了许久,网址: https://developers.google.com... 代码如下: Accessing argum ...
高德地图实现marker标记,Text多点文本标记,标记信息窗体,手动选点功能
1.marker标记,Text多点文本标记,标记信息窗体效果: 代码: <!DOCTYPE html> <html> <head><meta charset ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
高德地图的使用点标记、折线标记
高德地图是非常方便的插件可以在地图上添加点标记标记内容首先要在页面引入高德地图 <script src="https://webapi.amap.com/maps?v=1.4.13& ...
高德地图android拖动地图,建议高德地图添加地图拖动事件，添加方法如内容所述...
我下面的实现方法肯定是错误的,不知道如何将高德地图fragment添加到UZWebView中的,能否帮给我指点一下. package com.abc.amap; import org.json.JSO ...
高德地图实现Marker模拟gif动画
两个方法: 1.markerOptions.icons(iconList);设置多张图模拟gif动画 2.markerOptions.period(1);值越小刷新的越快注意事项: 如果显示了gif ...
Android高德地图添加点连点画线
说明: 最近碰到一个需求,需要在高德地图上选择航点,然后连线,最后形成一个路线图,把点的信息,用json文件的格式存储起来效果图: 1.先集成高德地图 app目录下的builder文件,直接添加高 ...

高德地图添加Marker点标记

高德地图添加Marker点标记相关推荐

最新文章

热门文章