高德地圖最簡單教程01-

前言:

肯定有很多人問了,爲什麼選擇高德地圖,不去選擇使用人數較多的的百度地圖呢,博主主要做的是h5混合開發app,剛開始用的就是百度地圖,但是定位極其不準,相差很遠,後來輾轉反側找到了高德地圖,發現這傢伙挺靠譜定位挺準的!!

第一章:顯示地圖

首先你需要引入,高德的js

這裏面的key在實際開發中需要換成你自己的,這裏是我的一個小例子

然後準備一個容器

注意:容器需要有具體的,寬和高,如果沒有設置的話,是看不見的,我剛開始在這裏卡了好久,其他的都是正確的,地圖就是不出來,後來發現是沒設置寬高,

初始化地圖

var map = new AMap.Map('container', {
zoom: 20,
center: [116.39, 39.9]

});

到這裏一個地圖就可以顯示出來了

第二章:精確定位

地圖顯示出來了,下一步肯定是需要精確定位了

var map, geolocation;
//加載地圖，調用瀏覽器定位服務
map = new AMap.Map('container', {
resizeEnable: true,
zoom: 15
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默認:true
timeout: 10000, //超過10秒後停止定位，默認：無窮大
buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
zoomToAccuracy: true, //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，
buttonPosition:'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯信息
});
//解析定位結果
function onComplete(data) {
console.log(data)
}
//解析定位錯誤信息
function onError(data) {
console.log(data)
}

定位成功後或獲取到當前位置信息,但是好像谷歌瀏覽器會報錯,好像是因爲服務器在國外,

這裏有篇帖子詳細介紹高精度定位報錯原因:http://blog.csdn.net/zerorm/article/details/70269545

第三章:創建信息窗體

var info=[]

var infoWindow = new AMap.InfoWindow({
content: info.join("<br>") //使用默認信息窗體框樣式，顯示信息內容
});
infoWindow.open(map, [116.39, 39.9]);

這個沒什麼好說的,一般使用默認信息窗體就ok,一般也不會單獨使用,都是結合定位和事件使用

第四章:逆地理編碼

這個也是比較常用的功能,所謂逆地理編碼,就是根據經緯度查地名,或者根據地名查詢經緯度

AMap.service('AMap.Geocoder', function() {
實例化Geocoder
geocoder = new AMap.Geocoder({
city: "" //城市，默認：“全國”
});
// 根據經緯度查地址
var lnglatXY = [116.396574, 39.992706]; //地圖上所標點的座標
geocoder.getAddress(lnglatXY, function(status, result) {
if(status === 'complete' && result.info === 'OK') {
info.push(result.regeocode.formattedAddress)
var infoWindow = new AMap.InfoWindow({
content: info.join("<br>") //使用默認信息窗體框樣式，顯示信息內容
});
infoWindow.open(map, [116.39, 39.9]);
} else {
//獲取地址失敗
}
});
根據地址查經緯度
geocoder.getLocation("北京市海淀區蘇州街", function(status, result) {
if(status === 'complete' && result.info === 'OK') {
console.log(result.geocodes[0].location)
} else {
//獲取經緯度失敗
}
});
})

第五章:路線規劃

博主再做一個類似滴滴打車的軟件,所以路線規劃是必不可少的

AMap.service('AMap.Driving', function() { //回調函數
//實例化Driving
driving = new AMap.Driving({
city: '北京市'
});
var driving = new AMap.Driving({
map: map,
panel: "panel"
});
driving.search([116.379028, 39.865042], [116.427281, 39.903719], function(status, result) {
//TODO 解析返回結果，自己生成操作界面和地圖展示界面
});
傳名稱
driving.search([{keyword:'方恆國際',city:'北京'},{keyword:'壺口瀑布'}], function(status, result){
console.log(result.routes[0])
});
})

第六章:事件系統

第七章:搜索加搜索提示

AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
var poiPicker = new PoiPicker({
//city:'北京',
input: 'pickerInput'
});
//初始化poiPicker
poiPickerReady(poiPicker);
});

function poiPickerReady(poiPicker) {
window.poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, 0)
});
//選取了某個POI
poiPicker.on('poiPicked', function(poiResult) {
console.log(poiResult)
var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
AMap.service('AMap.Geocoder', function() { //回調函數
//實例化Geocoder
geocoder = new AMap.Geocoder({
city: "" //城市，默認：“全國”
});
geocoder.getAddress(poiResult.item.location, function(status, result) {
if(status === 'complete' && result.info === 'OK') {
console.log(result.regeocode.formattedAddress)
infoWindow.setContent('搜索結果: <pre>' + result.regeocode.formattedAddress + '</pre>');
infoWindow.open(map, marker.getPosition());
} else {
//獲取地址失敗
}
});
})
// marker.setMap(map);
infoWindow.setMap(map);

// marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);

map.setCenter(infoWindow.getPosition());
});

}

第八章:總結

有些人會說我,都是貼代碼,也沒有講解,但是我覺得吧,沒什麼需要講的,把代碼複製過去瀏覽器打開看一下效果,基本都能理解,複用

第九章:完整代碼

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=a183eb8bdb7770ee13ee24a32b00ebec"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
</head>
<style type="text/css">
#pickerBox {
position: absolute;
z-index: 9999;
top: 50px;
right: 30px;
width: 300px;
}

#panel {
height: 500px;
}
</style>

<body>
<div id="container" style="width:100%; height:800px"></div>
<div id="pickerBox">
<input id="pickerInput" placeholder="輸入關鍵字選取地點" />
<div id="poiInfo"></div>
</div>
<div id="panel">

</div>
</body>
<script type="text/javascript">
// -------------------------------------------------------------初始化地圖----------------------------------------------
var map = new AMap.Map('container', {
zoom: 15,
center: [116.39, 39.9]
});
var info = [];
// -------------------------------------------------------------高精度定位---------------------------------------------
var map, geolocation;
//加載地圖，調用瀏覽器定位服務
map = new AMap.Map('container', {
resizeEnable: true,
zoom: 15
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默認:true
timeout: 10000, //超過10秒後停止定位，默認：無窮大
buttonOffset: new AMap.Pixel(10, 20), //定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
zoomToAccuracy: true, //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，默認：false
buttonPosition: 'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯信息
});
//解析定位結果
function onComplete(data) {
console.log(data)
}
//解析定位錯誤信息
function onError(data) {
console.log(data)
}
// -------------------------------------------------------------創建信息窗體--------------------------------
// var infoWindow = new AMap.InfoWindow({
// content: info.join("<br>") //使用默認信息窗體框樣式，顯示信息內容
// });
// infoWindow.open(map, [116.39, 39.9]);
// -------------------------------------------------------------搜索提示加地名搜索--------------------------------------------
AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
var poiPicker = new PoiPicker({
//city:'北京',
input: 'pickerInput'
});
//初始化poiPicker
poiPickerReady(poiPicker);
});

function poiPickerReady(poiPicker) {
window.poiPicker = poiPicker;
var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, 0)
});
//選取了某個POI
poiPicker.on('poiPicked', function(poiResult) {
console.log(poiResult)
var source = poiResult.source,
poi = poiResult.item,
info = {
source: source,
id: poi.id,
name: poi.name,
location: poi.location.toString(),
address: poi.address
};
AMap.service('AMap.Geocoder', function() { //回調函數
//實例化Geocoder
geocoder = new AMap.Geocoder({
city: "" //城市，默認：“全國”
});
geocoder.getAddress(poiResult.item.location, function(status, result) {
if(status === 'complete' && result.info === 'OK') {
console.log(result.regeocode.formattedAddress)
infoWindow.setContent('搜索結果: <pre>' + result.regeocode.formattedAddress + '</pre>');
infoWindow.open(map, marker.getPosition());
} else {
//獲取地址失敗
}
});
})
// marker.setMap(map);
infoWindow.setMap(map);

// marker.setPosition(poi.location);
infoWindow.setPosition(poi.location);

map.setCenter(infoWindow.getPosition());
});
}
// --------------------------------------------------------------逆地理編碼----------------------------------------------------------------------
AMap.service('AMap.Geocoder', function() {
實例化Geocoder
geocoder = new AMap.Geocoder({
city: "" //城市，默認：“全國”
});
// 根據經緯度查地址
var lnglatXY = [116.396574, 39.992706]; //地圖上所標點的座標
geocoder.getAddress(lnglatXY, function(status, result) {
if(status === 'complete' && result.info === 'OK') {
info.push(result.regeocode.formattedAddress)
var infoWindow = new AMap.InfoWindow({
content: info.join("<br>") //使用默認信息窗體框樣式，顯示信息內容
});
infoWindow.open(map, [116.39, 39.9]);
} else {
//獲取地址失敗
}
});
根據地址查經緯度
geocoder.getLocation("北京市海淀區蘇州街", function(status, result) {
if(status === 'complete' && result.info === 'OK') {
console.log(result.geocodes[0].location)
} else {
//獲取經緯度失敗
}
});
})
// -------------------------------------------------------------路線規劃--------------------------------------------------------------------------
AMap.service('AMap.Driving', function() { //回調函數
//實例化Driving
driving = new AMap.Driving({
city: '北京市'
});
var driving = new AMap.Driving({
map: map,
panel: "panel"
});
driving.search([116.379028, 39.865042], [116.427281, 39.903719], function(status, result) {
//TODO 解析返回結果，自己生成操作界面和地圖展示界面
});
傳名稱
driving.search([{keyword:'方恆國際',city:'北京'},{keyword:'壺口瀑布'}], function(status, result){
console.log(result.routes[0])
});
})
// ------------------------------------------------------------事件系統----------------------------------------------
var _onClick = function(e) {
AMap.service('AMap.Geocoder', function() {
geocoder = new AMap.Geocoder({
city: ""
});
geocoder.getAddress(e.lnglat, function(status, result) {
if(status === 'complete' && result.info === 'OK') {
var info = [];
info.push(result.regeocode.formattedAddress)
new AMap.InfoWindow({
content: info.join("<br>") //使用默認信息窗體框樣式，顯示信息內容
}).open(map, e.lnglat);
console.log(result.regeocode.formattedAddress)
}
});
})
}
AMap.event.addListener(map, "click", _onClick);
</script>

</html>

高德地圖最簡單教程01-

第一章:顯示地圖

第二章:精確定位

第三章:創建信息窗體

第四章:逆地理編碼

第五章:路線規劃

第六章:事件系統

第七章:搜索加搜索提示

第八章:總結

第九章:完整代碼

Kafka存儲機制

aws語音呼叫調用，告警電話

【轉】[C#] WebAPI 防止併發調用二（冥等性）

HTTP URL 詳解

車牌識別控制檯可快速整合二次開發

談談我對原型以及原型鏈的理解

vue-cli初步使用

給大家推薦一個挺好用的vue多頁面腳手架工具

詳解display與visibility的區別

vue.js中Axios的使用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結