前言:
肯定有很多人问了,为什么选择高德地图,不去选择使用人数较多的的百度地图呢,博主主要做的是h5混合开发app,刚开始用的就是百度地图,但是定位极其不准,相差很远,后来辗转反侧找到了高德地图,发现这家伙挺靠谱定位挺准的!!
第一章:显示地图
首先你需要引入,高德的js
<scrip type="text/javascript" src="http://webapi.amap.com/mapsv=1.4.3&key=a183eb8bdb7770ee13e e24a32b00ebc"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
这里面的key在实际开发中需要换成你自己的,这里是我的一个小例子
然后准备一个容器
<div id="container" style="width:100%; height:800px"></div>
注意:容器需要有具体的,宽和高,如果没有设置的话,是看不见的,我刚开始在这里卡了好久,其他的都是正确的,地图就是不出来,后来发现是没设置宽高,
初始化地图
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)
}
定位成功后或获取到当前位置信息,但是好像谷歌浏览器会报错,好像是因为服务器在国外,
这里有篇帖子详细介绍高精度定位报错原因:
第三章:创建信息窗体
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])
});
})
第六章:事件系统
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);
第七章:搜索加搜索提示
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>
