1. 程式人生 > >百度地圖api--拖動地圖顯示經緯度與顯示當前位置

百度地圖api--拖動地圖顯示經緯度與顯示當前位置

一.首先引入所申請的ak金鑰<script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script> 二.簡單樣式處理一下body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}#allmap{height:100%;width:100%;}#map span{display:block; width:20px; height:32px;background:url(http://wx.58haha.cn/1.png);position:fixed; left:50%; top:50%; margin-left:-10px; margin-top:-16px;z-index:999;}三.html程式碼佈局<div id="map"><span></span></div><div id="allmap"></div>四.js程式碼如下$(function(){var map = new BMap.Map("allmap");    var point = new BMap.Point(116.501573, 39.900877);    map.centerAndZoom(point, 16)// 定位物件var geoc = new BMap.Geocoder();var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);//$("#start_point").val(r.point.lng+','+r.point.lat);alert("當前位置經度為:"+r.point.lng+"緯度為:"+r.point.lat);setLocation(r.point);map.addEventListener("dragend",function(){                var centerPoint=map.getCenter();                //alert(centerPoint.lng + " " +centerPoint.lat);                map.clearOverlays();//清空原來的標註                var marker = new BMap.Marker(new BMap.Point(centerPoint.lng, centerPoint.lat)); // 建立點map.addOverlay(marker);    //增加點                  marker.setPosition(400, 400)                var point = new BMap.Point(centerPoint.lng, centerPoint.lat);                var gc = new BMap.Geocoder();                gc.getLocation(point, function(rs) {                    var addComp = rs.addressComponents;                    addr = addComp.province +" "+ addComp.city +" "+ addComp.district +" "+  addComp.street +" "+ addComp.streetNumber;alert(addr);                });            });}else {$("#start").attr("placeholder","請輸入您的當前位置")alert('無法定位到您的當前位置,導航失敗,請手動輸入您的當前位置!'+this.getStatus());}},{enableHighAccuracy: true});//獲取地理位置的函式function setLocation(point){geoc.getLocation(point, function(rs){var addComp = rs.addressComponents;var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//$("#start").val(result);//$("#start_location").val(result);alert("當前的位置為:"+result);});}});

相關推薦

地圖api--地圖顯示經緯度顯示當前位置

一.首先引入所申請的ak金鑰<script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"><

地圖實現獲取定位,實現地位

如果需要實現定位,則需要獲取的是ak,這是實現定位的前提, 像這樣的就是獲取到了ak,也就是一個專案中使用的是一個ak。 申請ak: ==>定位點動畫效果  marker.setAnima

使用地圖實現定位、搜尋定位

該程式碼主要的技術點: ==>獲取百度地圖key,也就是ak; ==>拖動定位,經緯度、詳細地址 ==>搜尋定位,根據所搜尋得地址進行地圖地位,精確定位。 具體的實現程式碼: <!DOCTYPE html> <html> <h

地圖API ajax非同步獲取資料庫資訊 頁面顯示多點標註和標註框

    var map = new BMap.Map("allmap");          // 建立地圖例項       var point = new BMap.Point(108.955665, 34.274037);  // 建立點座標       map.cen

地圖API,展示地圖和添加控件

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

地圖地址解析(Geocoding API)

1.什麼是Geocoding? Geocoding API 是一類簡單的HTTP介面,用於提供從地址到經緯度座標或者從經緯度座標到地址的轉換服務,使用者可以使用C# 、C++、Java等開發語言傳送HTTP請求且接收JSON、XML的返回資料。 2.功能介紹 Geocoding

python3調取地圖API輸出某地點的經緯度資訊

  1. 檢視API介面說明 地址:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding   注:callback的功能暫未研究     2. 申請自己的

基於地圖API的WinForm地圖

      大概去年的這個時候,我用VB寫了一個百度地圖的Demo,使用了webBrowser載入本地網頁的方式,只是限於當時的技術,好多功能都沒實現,昨天,我重新對這個程式進行了編寫,這一次我使用的是C#。在正式開始之前,先來解決幾個問題。       一、地圖    

對比小程式的地圖api-騰訊地圖地圖和高德地圖

由於公司的專案需要客戶輸入地址後返回經緯度,然後根據返回的收穫地址判斷此地址是否在有效配送範圍內,在查看了微信小程式的自帶的3哥方法後發現不夠用,只能找地圖api來處理,百度了一下發現,網上都推薦百度和高德地圖,就先配用了這2個試試,組出了2個demo。

【已解決】呼叫地圖API將城市轉換為經緯度問題

先獲取城市名,如:安徽合肥、上海...,再通過調取百度地圖的API來獲取相應的經緯度。 url 正確格式應該為: url = 'http://api.map.baidu.com/geocoder/v2/?address=%s&output=json&ak=

網頁嵌入地圖和使用地圖api自定義地圖的詳細步驟

在網頁中插入百度地圖 如果想在自己的網頁上面加入百度地圖的話,可以用百度地圖的api.具體使用方法如下: 第二步:設定地圖,大家可以對網站顯示地圖的寬高進行設定,其餘選項不動。 第三步:新增標註。點選第一個圖示後,在右側找到自己的位置,單擊滑鼠左鍵可定位。標

地圖API】如何進行地址解析反地址解析?——模糊地址能搜尋到精確地理資訊!

摘要:   什麼是地址解析?   什麼是反地址解析?   如何運用地址解析,和反地址解析?   可以同時運用地址解析,和反地址解析麼?答案是,可以的。詳見最後一個示例與程式碼。 ------------------------------------------------

離線API地圖呼叫示例原始碼功能

一、概述 百度離線API地圖呼叫示例原始碼提供了道路交通圖、衛星地圖和三維城市效果圖的離線載入功能,向量標註功能、向量編輯功能和測量功能等,旨在為使用者提供一個可以快速載入離線地圖或線上地圖的解決

地圖API圖示、文字、圖例連線

百度地圖開放平臺功能強大,使用簡單,為地圖的自定義提供了非常方便的途徑! 本文以繪製一張全國機器輻射圖為例記錄其基本使用方法,效果如下圖: 圖中包括了帶圖示和文字的標註,連線以及圖例。 1.關於座標 說到地圖,不得不說座標。 我以為,GPS獲取經緯度之後,把經緯度丟給地圖就可以了。但那真的是自以為。

ionic2 geolocation定位,將geolocation座標轉換為座標,高德地圖座標

安裝 geolocation 外掛 執行以下命令 npm install --save @ionic-native/geolocation 將geolocation外掛在app.module.ts內宣告 import { Geolocation } from '@ionic-nativ

OpenLayers中開啟SelectFeature控制元件後滑鼠在面要素上不能地圖的問題

OpenLayers中,如果在一個向量要素圖層中繪製了幾何面型別的要素,同時開啟了SelectFeature控制元件,當滑鼠在面要素上時是無法拖動地圖的。解決這個問題可以使用以下方法: selectControl = new OpenLayers.Control.Sele

【OpenLayers】ol3設定地圖、禁止

let pan = getPan(); pan.setActive(false);//false:當前地圖不可拖動。true:可拖動 function getFun() { let pan;

Android地圖開發學習筆記(二)之定位當前位置和自定義控制元件返回

在完成HelloMap後,接來完成的重要功能是如何定位當前位置和如何一鍵返回。效果圖如下: 這裡的控制元件就是一個ImageView,自己去百度一個好看的圖片就可以了。 一 定位當前位置和自定義控制元件返回 1.官方技術文件 可以先點選百度地圖定位技術文件,仔細看一下相關

d3js製作可地圖

效果圖 原始碼 <html> <head> <meta charset="utf-8"> <title>Map Force</title> </head&g

音樂API抓取

vim 後來 ews new ble -a getch 電臺 威爾 百度音樂API抓取 前段時間做了一個本地音樂的播放器 github地址,想實現在線播放的功能,於是到處尋找API,很遺憾,不是歌曲不全就是質量不高。在網上發現這麽一個APIMRASONG博客,有&ld