高德地图api 常用JS组件

最新推荐文章于 2025-05-22 11:21:09 发布

原创

最新推荐文章于 2025-05-22 11:21:09 发布 · 827 阅读

0 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#map #amap #高德地图标记点 #高德地图标记点连线 #高德地图轨迹

本文详细介绍了如何利用高德地图API创建JavaScript组件，包括设置地图、添加标记点以及绘制标记点连线，帮助开发者实现地图上的轨迹展示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你自己的key"></script>
<!-- UI组件库 1.0 -->
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
var wzMap = new AMap.Map('wzMapContainer', {
    resizeEnable: true, 
    zoom: 12,
    center: [121.348412,31.135244] 
});
wzMap.setMapStyle('amap://styles/darkblue');    //  标准 darkblue


var wzCenter = [121.348412,31.135244];  //坐标
var wzCaobao = [121.373221,31.164957];  //坐标
var wzChenhang = [121.482260,31.088360];  //坐标
var wzChongnan = [121.474279,31.210149];  //坐标
//  标记位置
var marker01 = new AMap.Marker({
    map: wzMap,
    position: wzCenter,
    icon: new AMap.Icon({ 
        image: "img/wzMark01.png",
        size: new AMap.Size(88, 60) //图标大小
    }),
})
marker01.setLabel({
    offset: new AMap.Pixel(-40, 50),  //中心库坐标偏移位置
    content: '<div class="mapMarkerBG01">中心库</d