在此记录一下X项目使用高德地图的思路高德地图(X项目前端框架是Jquery)
1首先需要了解高德地图的开发机制
2准备工作(封装方法，以便直接调用)
—2.1封装存储地理位置的方法(localStorage.js-参考)
—2.2封装超时方法($.timeOut-参考)
—2.3封装异步调用地图的方法
/**
* 异步加载地图js
* @param e: 加载完成回调方法名称,字符串格式;
*/
$.GDMapLoad = function(e){
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值';
if(e){
if(!$.ownStore.get("GDmapPosition")){//定位信息
var GDmapPosition= {};//new AMap.Geocoder();
GDmapPosition.ststus = "0";
GDmapPosition.lng = "";
GDmapPosition.lat = "";
GDmapPosition.province = "";
GDmapPosition.city = "XX市";
GDmapPosition.cityCode = "";
GDmapPosition.address = "";
$.store.set("CGDmapPosition" , CGDmapPosition);
}
url += '&callback=' + e;
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
} else{
$("body").append('<script type="text/javascript" src="'+ url +'"></script>');
}
}
3编写代码
—3.1 写一个页面样例：
——3.1. HTML:
<div class="map">
<span id="mapPosition">正在定位...</span>
</div>
——3.1. JS://浏览器定位
var isMapSuccess = 0;//初始化定位失败
$(function () {
$.GDMapLoad('GDMapInit');
})
/**
* 高德地图回调
*/
function GDMapInit(){
$("#mapPosition").click(function(){//是为失败的时候，点击位置跳转地图页面进行定位
var link = "../map.html?cbBack=" + $.encode(window.location.href);
window.location.href = link;
});
var GDmapPosition= {};
if ($.timeOut('indexMapInit')) {//此处d调用封装的获取session 超时方法
GDmapPosition = $.store.get('CGDmapPosition') || {};
if (GDmapPosition .ststus == '1') {//是否定位成功
isMapSuccess = 1;
$("#position").text(CGDmapPosition.city + CGDmapPosition.district);
return;
}
}
AMap.plugin('AMap.Geolocation', function() {//引入插件-浏览器定位(https://lbs.amap.com/api/javascript-api/guide/services/geolocation)
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 3000 //超过10秒后停止定位，默认：5s
});
geolocation.getCurrentPosition(function(status, result) {
if (status == 'complete') {//定位成功
GDmapPosition.ststus = '1';
GDmapPosition.lng = result.position.lng;
GDmapPosition.lat = result.position.lat;
GDmapPosition.province = result.addressComponent.province;
GDmapPosition.city = result.addressComponent.city;
GDmapPosition.cityCode = result.addressComponent.citycode;
GDmapPosition.cityCode = $.cityFormat(CGDmapPosition.cityCode);//$.cityFormat:地图cityCode转项目业务的cityCode编码
GDmapPosition.district = result.addressComponent.district;
GDmapPosition.address = result.formattedAddress;
} else {
GDmapPosition.ststus = '0';
GDmapPosition.lng = '';
GDmapPosition.lat = '';
GDmapPosition.province = '';
GDmapPosition.city = 'XX市';
GDmapPosition.cityCode = '';
GDmapPosition.district = '';
GDmapPosition.address = '定位失败-默认地市';
}
$.store.set('CGDmapPosition', CGDmapPosition);//存储定位信息
if(GDmapPosition.ststus == "1"){
$("#position").text(GDmapPosition.city + GDmapPosition.district);
isMapSuccess = 1;
} else {
$("#position").text("定位失败");
isMapSuccess = 0;
}
});
});
}
—3.2 定位失败跳转手动定位页面
——3.2.1 map页-HTML：
<body>
<div class="map-search">
<input id="mapSearch" type="text" placeholder="请输入关键字或点击地图">
</div>
<div id="map" class="map"></div>
<div id="mapSelect" class="map-select"></div>
<div class="map-btn">
<a class="btn" href="javascript:beOk()">确认</a>
</div>
</body>
——3.2.1 map页-js：
$(function(){
$.GDMapLoad("GDMapInit");
});
/**
* 高德地图初始化
*/
var map;
var geocoder;
var marker;//标点
function GDMapInit(){
map = new AMap.Map("map", {
resizeEnable: true
});
AMap.plugin('AMap.Geocoder', function() {//异步加载地理编码与逆地理编码服务插件
geocoder = new AMap.Geocoder();
});
map.on('click', clickGetPosition);
keySearch();//初始化搜索框
doNewPosition();//重新定位
}
/**
* 关键字检索
*/
function keySearch(){
AMap.plugin('AMap.Autocomplete', function(){
var mapSearch = new AMap.Autocomplete({
input: "mapSearch",//支持传入输入框DOM对象的id值，或直接传入输入框的DOM对象。
});
AMap.event.addListener(mapSearch, "select", keySearchSelect);//注册监听，当选
});
}
/**
* 关键字检索返回
*/
function keySearchSelect(result){
var lng = result.poi.location.lng;
var lat = result.poi.location.lat;
setMarker(lng , lat);//设置标点
}
/**
* 重新获取定位(https://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation)
*/
function doNewPosition(){
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
showMarker: false //是否显示定位点
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
});
}
/**
* 定位成功后执行参数
*/
function onComplete(result){
setMarker(result.position.lng , result.position.lat);
}
/**
* 设置marker，定义标点(https://lbs.amap.com/api/javascript-api/reference/overlay#marker)
*/
function setMarker(lng , lat){
map.setCenter([lng , lat]);//设置地图中心位置
if(!marker){
map.setZoom(15);
marker = new AMap.Marker({
position: [lng , lat],
});
}else{
marker.setPosition([lng , lat]);//setPosition(lnglat:[LngLat])设置点标记位置
}
marker.setMap(map);//为Marker指定目标显示地图
lnglatFormat(lng , lat);//经纬度重新解析，给搜索框赋值
}
/**
* 经纬度解析
*/
var GDmapPositionNew;//存储搜索结果或点击地图定位信息
function lnglatFormat(lng , lat){
var $mapSelect = $("#mapSelect")
geocoder.getAddress([lng , lat], function(status, result) {
if(status === 'complete' && result.info === 'OK' && result.regeocode) {
GDmapPositionNew= {};
GDmapPositionNew.ststus = "1";
GDmapPositionNew.lng = lng;
GDmapPositionNew.lat = lat;
GDmapPositionNew.province = result.regeocode.addressComponent.province;
GDmapPositionNew.city = result.regeocode.addressComponent.city;
GDmapPositionNew.cityCode = result.regeocode.addressComponent.citycode;
GDmapPositionNew.cityCode = $.cityFormat(CGDmapPositionNew.cityCode);
GDmapPositionNew.district = result.regeocode.addressComponent.district;
GDmapPositionNew.address = result.regeocode.formattedAddress;
$mapSelect.text(GDmapPositionNew.address);
}else{
GDmapPositionNew= false;
$mapSelect.text("");
}
});
}
/**
* 确认
*/
function beOk(){
var cbBack = $.decode($.getUrlParam("cbBack"));
if(GDmapPositionNew){//重新设置新的地理位置
$.store.set("CGDmapPosition" , GDmapPositionNew);
}
$.gotoLink(cbBack);
}
4结尾
还有很多功能可以自定义，官方API 参考手册
