1.需要引入JS文件
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDnX7ZzqMBrXWmBLkOA18otCargKzrN8Iw"></script>
key没有的话 可以去下面这个网站按照操作说明获取
https://www.jb51.net/article/89970.htm
下面这个DIV就是展示地图的 id 可以修改 但是要保证全部用到的地方修改完毕
<div class="div_map" id="div_map_info"></div>
标识点图片 就是这个红色图标 
2. 建议将生成地图的提成一个方法 用定时判断是否Google加载完毕 红框部分是我自己传递的参数 实际情况自行调整 不需要可以删除
3.googleParInfo.initGoogleMap 方法 要是下面方法有些参数变量没用到 可以根据实际情况删除
红色标记的为主要初始化地图的方法 其他的方法属于获取地图内的一些参数
var googleParInfo = {
imangePath: "",
marker_data: "",
// 地图初始化
initGoogleMap: function(imangePath, objData){
googleParInfo.imangePath = imangePath;
var map;
var lat = $("#hidden_latitude").val(); // 纬度
var lng = $("#hidden_longitude").val(); // 经度
var marker;// 标注
var infowindow;// 汽泡
var marker_first; // 第一个标注
function initialize() {
// 初始位置
if(lat == "" || lng == ""){
lat = "22.6876402383";
lng = "113.9259866372";
}
var latLng = {"lat":lat,"lng":lng};
var myLatlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('div_map_info'), mapOptions);
if (marker_first != null) {
marker_first.setMap(null);
}
//var clickedLocation = new google.maps.LatLng(myLatlng);
marker_first = new google.maps.Marker({
position: myLatlng,
map: map,
icon: imangePath +"/resources/shineDesign/img/designPlant/google_point.png" // 就是标识点图片 见文章最上面
});
marker_first.setDraggable(true);
googleParInfo.marker_data = marker_first;
// 当地图拖拽的时候处理的内容
google.maps.event.addListener(marker_first, 'dragend', googleParInfo.googleDragend);
}
//google.maps.event.addDomListener(window, 'load', initialize); 这种写法有些情况不兼容 可以换成下面的
initialize() // 加载地图
},
// 获取定位点具体位置
getGoogleAddress: function (aData){
var arrayInfo = new Array();
for(var s = 0; s < aData.length; s++){ // 过滤不知名的路 往上找
if(aData[s]["formatted_address"].indexOf("Unnamed") != -1){
continue;
}
arrayInfo.push(aData[s]);
break;
}
return arrayInfo[0].formatted_address
},
// 获取地图定位相关城市信息
getGoogleCity: function(aData){
var arrayInfo = new Array();
for(var s = 0; s < aData.length; s++){ // 获取长度为2 或者为3 的 这样里面就包含了 省市区信息了
if(aData[s]["address_components"].length == 2 || aData[s]["address_components"].length == 3){
if(aData[s]["formatted_address"].match(/\d+/g)){ // 过滤是数字的城市
continue;
}
if(aData[s]["formatted_address"].indexOf("Unnamed") != -1){ // 过滤不知名的路 往上找
continue;
}
arrayInfo.push(aData[s]);
}
}
if(arrayInfo.length > 0){
return arrayInfo[0];
}
// 不确定上面的判断能全部过滤 下面的这段代码留着备用
switch (aData.length){
case 4:
return aData[0];
break;
case 5:
return aData[1];
break;
case 6:
return aData[2];
break;
case 7:
return aData[3];
break;
case 8:
return aData[4];
break;
case 9:
return aData[5];
break;
case 10:
return aData[6];
break;
default:
return aData[0];
break;
}
},
//根据输入的位置定位地图 该方法 可以绑定 blur事件触发
addressTolatLng: function (){
var geocoder = new google.maps.Geocoder();
var latLng;
var address = document.getElementById("geoLoca_insAddr").value; // 输入的地址
var a = new google.maps.ElevationService();
geocoder.geocode({'address':address},function(results,status){
if(status == google.maps.GeocoderStatus.OK){
var latitude = results[0].geometry.location.lat();//经度
var longitude = results[0].geometry.location.lng();//纬度
var marker_first;
latLng = {"lat":latitude,"lng":longitude};
var myLatlng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('div_map_info'), mapOptions);
if (marker_first != null) {
marker_first.setMap(null);
}
//var clickedLocation = new google.maps.LatLng(myLatlng);
marker_first = new google.maps.Marker({
position: myLatlng,
map: map,
icon: googleParInfo.imangePath +"/resources/shineDesign/img/designPlant/google_point.png"
});
googleParInfo.setInstallInfo(results, false)
marker_first.setVisible(true);
marker_first.setDraggable(true);
googleParInfo.marker_data = marker_first;
google.maps.event.addListener(marker_first, 'dragend', googleParInfo.googleDragend);
a.getElevationForLocations({locations:[latLng]},function(data){
if (data && data[0]){
var alt = Math.round(data[0].elevation);
$("#loca_altitude").val(alt) // 海拔
}
});
}else{
alert("没有找到相应的地址")
}
})
},
// 获取地图位置相关信息(根据项目实际情况修改下面方法)
setInstallInfo: function (responses, isCoverage){
if(responses && responses.length > 0) {
var cityInfo = googleParInfo.getGoogleCity(responses);
var address = googleParInfo.getGoogleAddress(responses)
if(isCoverage != false){
$("#geoLoca_insAddr").val(address); // 安装当前定位的具体位置
}
if(cityInfo.address_components.length == 2){
$("#hidden_district").val(cityInfo.address_components[1]["long_name"]); // 区域
$("#hidden_country").val(cityInfo.address_components[1]["long_name"]); // 国家
$("#loca_city").val(cityInfo.address_components[0]["long_name"]); // 城市
}else if(cityInfo.address_components.length == 3){
$("#hidden_district").val(cityInfo.address_components[2]["long_name"]); // 区域
$("#hidden_country").val(cityInfo.address_components[2]["long_name"]); // 国家
$("#loca_city").val(cityInfo.address_components[0]["long_name"]); // 城市
}else{
var newArray = new Array();
newArray = cityInfo.address_components.reverse();
$("#hidden_district").val(newArray[0]["long_name"]); // 区域
$("#hidden_country").val(newArray[0]["long_name"]); // 国家
$("#loca_city").val(newArray[2]["long_name"]); // 城市
}
}
},
// 地图拖动定义的方法
googleDragend: function(){
var marker_first = googleParInfo.marker_data
var lat = marker_first.getPosition().lat();
var lng = marker_first.getPosition().lng();
$("#hidden_latitude").val(lat);
$("#hidden_longitude").val(lng);
var a = new google.maps.ElevationService();
var latLng = {"lat":lat,"lng":lng};
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
latLng: latLng
}, function(responses) {
googleParInfo.setInstallInfo(responses)
});
a.getElevationForLocations({locations:[latLng]},function(data){
if (data && data[0]){
var alt = Math.round(data[0].elevation);
$("#loca_altitude").val(alt) // 海拔
}
});
}
}
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
