高德地图api 常用JS组件

<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');    //  标准 darkbluevar 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">中心库</div>',
})var marker02 = new AMap.Marker({map: wzMap,position: wzCaobao,icon: new AMap.Icon({ image: "",size: new AMap.Size(25, 25) //图标大小})
})
marker02.setLabel({offset: new AMap.Pixel(-10, 4),  //坐标偏移位置content: '<div class="mapMarkerBG"><span class="mapMarkerText">仓库</span></div>',
});var marker03 = new AMap.Marker({map: wzMap,position: wzChenhang,icon: new AMap.Icon({ image: "",size: new AMap.Size(25, 25) //图标大小})
})
marker03.setLabel({offset: new AMap.Pixel(-10, 4),  //坐标偏移位置content: '<div class="mapMarkerBG"><span class="mapMarkerText">仓库</span></div>',
});var marker04 = new AMap.Marker({map: wzMap,position: wzChongnan,icon: new AMap.Icon({ image: "",size: new AMap.Size(25, 25) //图标大小})
})
marker04.setLabel({offset: new AMap.Pixel(-56, -92),  //已到达坐标偏移位置content: '<div class="mapMarkerArrived"><div class="mapMarkerBGArrived"><span class="mapMarkerText">仓库</span></div></div>',
});// 地图上覆盖物较多的情况下，如果需要保证所有覆盖物都在视野范围内， 需要将地图调整到合适的缩放等级和中心点，我们可以调用setFitView()方法
// wzMap.setFitView();// 绘制轨迹
var polyline01 =new AMap.Polyline({map: wzMap,path: [wzCenter,wzCaobao],strokeColor: "#a0a0a0",  //线颜色strokeOpacity: 1,     //线透明度strokeWeight: 3,      //线宽，默认为 1strokeStyle: "solid"  //线样式
});
var polyline02 =new AMap.Polyline({map: wzMap,path: [wzCenter,wzChenhang],strokeColor: "#15d729",  //线颜色strokeOpacity: 1,     //线透明度strokeWeight: 3,      //线宽，默认为 1strokeStyle: "dashed"  //线样式
});
var polyline03 =new AMap.Polyline({map: wzMap,path: [wzCenter,wzChongnan],strokeColor: "#15d729",  //线颜色strokeOpacity: 1,     //线透明度strokeWeight: 3,      //线宽，默认为 1strokeStyle: "dashed"  //线样式
});AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {if (!PathSimplifier.supportCanvas) {alert('当前环境不支持 Canvas！');return;}var pathSimplifierIns = new PathSimplifier({zIndex: 100,autoSetFitView:false,map: wzMap, //所属的地图实例getPath: function(pathData, pathIndex) {return pathData.path;},getHoverTitle: function(pathData, pathIndex, pointIndex) {if (pointIndex >= 0) {//point return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;}return pathData.name + '，点数量' + pathData.path.length;},renderOptions: {"startPointStyle": {"radius": 1,},"endPointStyle": {"radius": 1,},"pathLineStyle": {"lineWidth": 2,"strokeStyle": "#000000","borderWidth": 0,},"pathNavigatorStyle": {"autoRotate": false,},renderAllPointsIfNumberBelow: -1 //绘制路线节点，如不需要可设置为-1}});window.pathSimplifierIns = pathSimplifierIns;//设置数据pathSimplifierIns.setData([{name: '路线',path: [wzCenter,wzChenhang]}]);//对第一条线路（即索引 0）创建一个巡航器var wzNavg = pathSimplifierIns.createPathNavigator(0, {loop: true, //循环播放speed: 10000, //巡航速度，单位千米/小时pathNavigatorStyle: {width: 59,height: 45,content: PathSimplifier.Render.Canvas.getImageContent('img/wzLegendCar.png', onload, onerror),},});wzNavg.start();
});
</script>

高德地图api 常用JS组件相关推荐

【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图...
原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
js室内地图开发_概述-室内地图 JS API | 高德地图API
室内地图 JavaScript API 简介说明: 室内地图数据对新用户暂停开放,建议您使用 Javascript API 可实现室内外一体化效果. 高德室内地图 JavaScript API,是由 ...
【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...
转载：高德地图API学习从零开始学高德JS API（一）地图展现
原文地址:https://www.cnblogs.com/milkmap/p/3687855.html [高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
java高德地图api开发平台_【高德地图API】从零开始学高德JS API（一）地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
使用amap-js引入高德地图AMap及其UI组件AMapUI
介绍 AMapJS 是高德地图加载模块,帮助您轻松的加载高德地图相关API.之后根据高德地图API做你想做.它可以灵活便捷的在现代化的工具链以及前端框架中使用. 特性异步加载. 支持Promise ...

高德地图api 常用JS组件

高德地图api 常用JS组件相关推荐

最新文章

热门文章