web开发如何使用高德地图API（四）通过AMap.Marker自定义标点

本文转载自查看原文 2018-07-09 19:23 11134 高德地图/ Marker实例/ 自定义描点/ web开发

说两句：

以下内容除了我自己写的部分，其他部分在高德开放平台都有（可点击外链访问）。
我所整理的内容以实际项目为基础希望更有针对性的，更精简。
点击直奔主题。

准备工作：

首先，注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告诉你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

显示基础地图所用到的HTML和JS

<body>
<div id="container"></div>
</body>

<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true, zoom:11, center: [116.397428, 39.90923]//默认的地图中心经纬度  }); </script>

引入高德地图工具包js文件

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

在map中指定的经纬度上描点

//创建一个Marker实例：
var markerTemp = new AMap.Marker({

    position : [lng,lat],
    offset : new AMap.Pixel(-21,-21),//偏移量，默认以marker左上角位置为基准点
    map : map
});
// 自定义点标记内容（已设置头像显示在描点位置为例）
var markerContent = document.createElement("div");
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";//设置描点img的统一样式
markerImg.src = path + data[0][i].userId.headSculpture;//设置图片url
markerContent.appendChild(markerImg);
markerTemp.setContent(markerContent);

在已有地图上添加与删除Marker

// 将创建的点标记添加到已有的地图实例：
map.add(marker);

// 移除已创建的 marker
map.remove(marker);

点击查看Marker的全部属性和方法

监听Marker的点击事件

　　下回再说

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Android集成高德地图如何自定义marker vue之使用高德地图(v-amap)自定义infoWindow信息窗体高德地图(AMap)JavaScript API的使用 react amap 高德地图中多点定位，图标自定义高德地图-Vue-amap实现POI搜索+自定义点高德地图API之DOM事件+自定义事件高德地图在marker里设置自定义属性结合react-amap使用高德地图的原生API 在vue中使用高德地图开发，以及AMap的引入？【高德地图API】如何设置Marker的offset？