百度地圖API，根據經緯度實現車輛移動軌跡繪製

阿新 • • 發佈：2019-01-14

百度地圖，實現車輛軌跡繪製

實現思路：

1.根據經緯度實現車輛軌跡繪製

2.使用百度地圖API的兩個覆蓋物實現，Polyline（折線）繪製軌跡，Marker（圖示）繪製小車圖示

3.將每兩個座標間連線起來，形成連貫的軌跡線路

4.生成下一個圖示後刪除上一個繪製的圖示，形成小車移動動畫感

5.本例使用的是臨近的隨機座標點

6.初學者，歡迎大家交流學習

7.檢視例項

程式碼：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>
	<title>車輛執行軌跡測試</title>
<script src="http://c.cnzz.com/core.php"></script></head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var startLong = 106.652024;
	var startLat = 26.617221;
	var endLong = 106.652024;
	var endLat = 26.614221;
	
	var startLongR = 106.652024;
	var startLatR = 26.617221;
	var endLongR = 106.652024;
	var endLatR = 26.614221;
	
	

	var linesPoints = null;
	// 百度地圖API功能
	var map = new BMap.Map("allmap");    // 建立Map例項
	map.centerAndZoom(new BMap.Point(106.652024,26.617221), 15);  // 初始化地圖,設定中心點座標和地圖級別
	map.addControl(new BMap.MapTypeControl());   //新增地圖型別控制元件
	map.setCurrentCity("貴陽");          // 設定地圖顯示的城市 此項是必須設定的
	map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放
   
   setInterval(goWay,500);
   var carMk;
   var myIcon = new BMap.Icon("http://sandbox.runjs.cn/uploads/rs/101/wmbvrxnx/kache.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});//卡車
   
   function goWay(){
	   startLong = endLong;
	   startLat = endLat;
	   endLong = getRound(endLong);
	   endLat = getRound(endLat);
	   
	   drawIcon(startLong,startLat,endLong,endLat);
	   //drawRedLine();
   }
   
   function getRound(temp){
	   var i = Math.round(Math.random()*9+1);
	   if(i%2==0){
		   return temp + i*0.0001;
	   }else{
		   return temp - i*0.0001;
	   }
   }
   function getRound1(temp){
	   var i = Math.round(Math.random()*9+1);
	   if(i%2==0){
		   return temp + i*0.0002;
	   }else{
		   return temp - i*0.0002;
	   }
   }
   
   function drawGreenLine(startLong,startLat,endLong,endLat){
	   var polyline = new BMap.Polyline([
		                                  new BMap.Point(startLong,startLat),//起始點的經緯度
		                                  new BMap.Point(endLong,endLat)//終止點的經緯度
		                                  ], {strokeColor:"green",//設定顏色 
		                                  strokeWeight:3, //寬度
		                                  strokeOpacity:1});//透明度
	   map.addOverlay(polyline);
   }
   
   function drawRedLine(){
	   startLongR = endLongR;
	   startLatR = endLatR;
	   endLongR = getRound1(endLongR);
	   endLatR = getRound1(endLatR);
	   var polyline1 = new BMap.Polyline([
		                                  new BMap.Point(startLongR,startLatR),//起始點的經緯度
		                                  new BMap.Point(endLongR,endLatR)//終止點的經緯度
		                                  ], {strokeColor:"red",//設定顏色 
		                                  strokeWeight:3, //寬度
		                                  strokeOpacity:1});//透明度
	   map.addOverlay(polyline1);
   }

   function drawIcon(startLong,startLat,endLong,endLat){
	   if(carMk){
		   map.removeOverlay(carMk);
	   }
	   carMk = new BMap.Marker(
	               new BMap.Point(endLong,endLat),//起始點的經緯度
	              {icon:myIcon});
	   map.addOverlay(carMk);
	   drawGreenLine(startLong,startLat,endLong,endLat);
   }
</script>

百度地圖API，根據經緯度實現車輛移動軌跡繪製

百度地圖，實現車輛軌跡繪製實現思路： 1.根據經緯度實現車輛軌跡繪製 2.使用百度地圖API的兩個覆蓋物實現，Polyline（折線）繪製軌跡，Marker（圖示）繪製小車圖示 3.將每兩個座標間連線起來，形成連貫的軌跡線路 4.生成下一個圖示後刪除上一個繪製的圖示，形成

使用html5獲取當前手機的經緯度，並接入百度地圖API，查詢出當前位置

api detail attribute spa rip coord component per bar 最近項目需要，稍微研究一下html5獲取當前地理位置的問題。獲取當前位置的經緯度很簡單，一句代碼就搞定 [javascript] view plain cop

呼叫百度地圖api，通過ip獲取當前城市以及經緯度

一、申請Ak值登入百度地圖開放平臺：建立應用：建立成功後ip值就有了：二、程式碼實現 <?php $ip="xxxxxxx"; $content=file_get_contents("http://api.map.baidu.com/location/ip?

百度地圖api，定位，新增城市控制元件，單擊獲得經緯度並mark

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0,

百度地圖api之----根據用戶ip定位城市

服務利用 bsp result 城市 blog 經緯度 name 定位 LocalCity 這個類是利用用戶IP地址去百度數據庫裏查詢得到IP所在的城市，用法如下： var objCity = new BMap.LocalCity(); objCity.get(func

百度地圖API，展示地圖和添加控件

空間鼠標滾輪比例尺鼠標 right size ofo ext aid 1、申請百度賬號和AK 點我申請 2、準備頁面根據HTML標準，每一份HTML文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規範的文檔聲明： <!DOCTYPE html

百度地圖API，使用者拒絕獲取地理位置getStatus()還是等於BMAP_STATUS_SUCCESS

1、業務場景:百度地圖 JavaScript API中有一個方法是通過瀏覽器定位，getCurrentPosition。但是使用者拒絕或者允許獲取地理位置，this.getStatus()都是0；

Android Studio中使用百度地圖API，不顯示地圖的問題解決辦法

一年前用過這個，當時也遇到很多問題，後面慢慢解決了，然而沒有總結遇到的問題，現在重新做這個，又浪費了一天時間終於解決了崩潰和不顯示地圖的問題,記錄一下一丶將百度地圖SDK新增到專案中進入這個網址點選自定義下載之後，選擇你要的功能，然後點下面的開

百度地圖demo，根據ip展示地圖顯示地區，並在地圖上高亮顯示

需求提出：使用百度地圖展示使用者註冊時的地區並高亮顯示。方案設計：根據使用者註冊時獲取使用者的ip地址，根據ip地址獲取經緯度，再根據經緯度顯示在地圖上展示，並高亮。解決需求： 1.獲取使用者註冊ip （比較簡單，省略）； 2.根據ip地址獲取經緯度。使用百度地圖的ap

從百度地圖api獲取地鐵站經緯度

class GetInfo: def __init__(self,df): import pandas assert type(df) == pandas.core.frame.DataFrame and ('city' in df.c

百度地圖API中使用ajax實現點選地圖生成標註並儲存到資料庫

在最近的專案中要使用到百度地圖的api對於地圖處理，要實現的功能是在地圖上每一次點選都會生成一個標註，並把標註位置的座標儲存到資料庫中。搜了很多地方都沒有找到，就打算自己寫寫，沒想到最後發現也不是很難。話不多說，直接上程式碼。首先是地圖處理的map.html

百度地圖api定位，根據經緯度顯示當前城市名

當前城市：<span id="pro_num">鄭州</span> <div id="allmap"></div> <script type="text/javascript" src="http://api.map.baidu.com/

百度地圖api根據經緯度獲取地址的詳細信息

json indexof close 詳細信息 format read ESS clas ava package com.haiyisoft.cAssistant.mapApi; import java.io.BufferedReader; import java.io

百度地圖API實現地址&經緯度互相轉換

原文地址：https://blog.csdn.net/a497785609/article/details/72356588 1.根據地址取得經緯度：請求地址：http://api.map.baidu.com/geocoder/v2/?address=中國成都人才市場&output

使用者Ip地址和百度地圖api介面獲取使用者地理位置（經緯度座標，城市）

<?php //獲取使用者ip(外網ip 伺服器上可以獲取使用者外網Ip 本機ip地址只

百度地圖API之百度地圖退拽標記點獲取經緯度的實現程式碼

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

百度地圖api實現的定位，導航，附近搜尋

實現功能： 1、定位，根據裝置自動定位，設定到區，可自行調整； 2、附近地標搜尋，顯示定位附近圖書館，可更改； 3、路線規劃，點選終點或手動輸入終點位置；程式碼實現： <%@ page language="java" imp

根據GPS定位得到的經緯度呼叫百度地圖API在地圖上標註

可以實現單個點或多個點的標註，首先先看得到的效果圖：方法：首先要註冊百度地圖開發者賬號，然後建立應用得到屬於自己的ak金鑰。具體步驟不祥細介紹了。主要是利用百度地圖給出的demo進行修改：程式碼如下： <!DOC

vue結合百度地圖Api實現周邊配置查詢及根據篩選結果顯示對應座標詳情

在我們平常寫房地產相關專案的時候經常會用到百度地圖，因為這一塊客戶會考慮到房源周圍的配套或者地鐵線路所以在這類專案中就不可以避免的會用到百度地圖，當然這只是其中一種,其他地圖工具也可以，因為我這個專案恰好要求用百度地圖，所以就好好學習了一波百度地圖，大概看了官方文件，發現沒有想象中那麼難,要相信自己可以做出來

HTML5頁面直接調用百度地圖API,獲取當前位置，直接導航目的地(轉)

wid dir tle mark utf-8 mil 獲取 open init HTML5頁面直接調用百度地圖API,獲取當前位置，直接導航目的地我是應用在微信中，自定義菜單，菜單直接鏈接到這個HTML5頁面，獲取當前位置後，頁面中定好目的地，這樣打開頁面後直接進入導航頁

百度地圖API，根據經緯度實現車輛移動軌跡繪製

相關推薦