PHP高德地图描点,引用高德地图描点画行动轨迹
arr数组中存放地址的经纬度
function initMap(arr){
mapObj = new AMap.Map("staff_track_index_map_container"); //要显示地图的区域
//初始化地图对象,加载地图
var mapArr=new Array();
$.each(arr,function(i){
var j=i+1;
mapArr.push(new Array(arr[i]["cust_name"]+" "+arr[i]["add_time"],arr[i]["longitude"],arr[i]["dimension"]));
})
mapInit(mapArr);
}
function mapInit(arr){
var aLine=arr;
var AlineNew=Array();
if(aLine.length!=0)
{
AlineNew.push(new Array("",aLine[0][1],aLine[0][2]))
}else{
var Center=getMapCenter();
AlineNew.push(new Array("暂无轨迹",Center[0],Center[1]));
}
mapObj = new AMap.Map("staff_track_index_map_container",{
view: new AMap.View2D({
center:new AMap.LngLat( AlineNew[0][1],AlineNew[0][2]),//地图中心点
zoom:14 //地图显示的缩放级别
})
});
if(aLine.length!=0)
{
addMarker(aLine);
addLine(aLine,false);
}
}
function addMarker(arr){ //自定义窗体信息 var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) }); //console.log(mapObj); for (var i = 0; i < arr.length; i++) { var marker; var icon; if(i==0){ icon="__PUBLIC__/assets/images/gps_qidian.png"; }else if(i==arr.length-1){ icon="__PUBLIC__/assets/images/gps_zhongdian.png"; }else{ icon="__PUBLIC__/assets/images/position_shop.png"; } marker = new AMap.Marker({ icon:icon, title:arr[i][0], position:new AMap.LngLat(arr[i][1],arr[i][2]) }); marker.setMap(mapObj); //在地图上添加点 marker.on('click', markerClick); marker.emit('click', {target: marker}); mapObj.setFitView(); } function markerClick(e) { infoWindow.setContent(e.target.title); infoWindow.open(mapObj, e.target.getPosition()); } } function addLine(arr) { var lineArr = new Array();//创建线覆盖物节点坐标数组 var color="red"; for(var i=0;i
PHP高德地图描点,引用高德地图描点画行动轨迹相关推荐
- vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离 一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
- 使用高德地图2D/3D SDK添加海量描点Marker以及视图中显示所有描点、我的定位添加呼吸动画
高德地图SDK添加海量描点.我的定位呼吸动画 一.添加海量描点 1.高德2D SDK添加实现 1)初始化MarkerOverlay 2)设置海量描点数据 4)Marker点击监听 5)MarkerOv ...
- vue前端项目引用高德离线地图
由于上一篇下载离线地图瓦片的工具有问题,需要更换工具重新下载离线瓦片,步骤如下: 下载离线瓦片(后端) 1.1用MapDownloader,下载离线地图瓦片 工具提取码: mmdl 需要对工具作如下配 ...
- 高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档 组件设计目的 分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
- Android接入高德地图SDK 一引入高德sdk
SHA1的获取: 然后输入cd .android 回车 在输入:keytool -list -v -keystore debug.keystore 在回车,密钥默认 android 添加 jar 文件 ...
- react 逆地理 高德地图_react中使用高德地图的原生API
干货,无话 1.react-create-app,创建新react项目: 2.npm install react-amap,引入高德地图的封装: 3.编写组件index.js: import Reac ...
- 高德WMTS图层 调用天地图瓦片地图
项目需要展示海外地点标注(且卫星图与标准矢量地图切换),但是高德地图不显示海外地点数据,查了高德的海外LBS服务,是收费的,而且还处于试运行状态,遇到问题还得提工单,比较麻烦. 后来查了查资料,发现天 ...
- android-注释超详细-高德地图实现定位和切换地图类型
具体实现效果 1.普通模式 2.夜晚模式 3.显示交通 在夜间模式下的交通 4.卫星模式 1.实现基本地图显示 具体可参考上一篇博客安卓开发显示高德地图 2.修改AndroidManifest.xml ...
- iOS定位服务与地图应用开发:高德地图开发
2019独角兽企业重金招聘Python工程师标准>>> 由于博客迁移至www.coderyi.com,文章请看http://www.coderyi.com/archives/419 ...
最新文章
- 里氏替换原则(Liskov Substitution Principle,LSP)
- linux vi 强制退出_linux的编辑大法
- Head First JSP---随笔七
- 《数据管理能力成熟度模型》标准宣贯会在上海召开
- windows下面的txt在linux下面显示为乱码
- 前端学习(1043):回车把数据存储到本地存储里面
- NLP 《seq2seq》
- Oracle occi 抓包,instantclient 32下载-instantclient-basic(轻量级数据库)32位 11.2.0.4.0 官方版 - 河东下载站...
- python安装idle_Python从零单排之Python环境及IDLE安装
- python学习第25天
- UILabel显示html文本
- ibm x3650 服务器安装系统安装,IBM服务器X3650安装操作系统步骤
- 2017 matlab 仿真,【2017年整理】Simulink仿真教程.ppt
- Maven:repositories、distributionManagement、pluginRepositories中repository的区别(轻松搞明白)
- java 开源mis系统框架_开源 MIS 系统解决方案 jeeww
- 生物信息(bioinformation)学名词解释
- 刚刚,中国电子学会给阿里云飞天颁发了15年来首个特等奖
- 电商私域流量搭建规划社群运营推广sop销售转化计划书表格模板方案
- UPS BP650CH实现nas自动关机
- tokenizer()和tokenizer.encode_plus()的区别
热门文章
- 设计模式中的观察者模式
- 使用 yo 命令行向导创建 SAP UI5 应用
- SAP Spartacus的开发人员来自全球各地
- 深入学习SAP UI5框架代码系列之六:SAP UI5控件数据绑定的实现原理
- 几种常用的排序算法之JavaScript实现
- How does framework require TechnicalInfo.js
- how to avoid transport error when cloning project in Eclipse
- 使用async,await关键字进行API Access Token的获取
- No access for action Display of object type Product (PRODUCT)
- html native code is rendered from xml configuration