Google Map API 的基础使用

因为公司业务由国内市场到国际市场，有一些国际性业务的项目需要用到Google Map。项目完成后，把一些常用的方法写出来，供大家参考。

一、google地图基础显示

（1）引用google map js资源

<!--国内可用-->
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=*****"></script>
<!--国外可用-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=*****"></script>

tips：要正常使用google map 的各项功能，需要用google账号申请一个API key，反正我当时申请key时花费了不少时间，申请google邮箱账号时PC端不行，在移动端申请申请时又提示手机号码无效，各种坑。

（2）在html文件中定义一个盒子

<div id="googleMap"></div>

tips：如果要全屏展示地图，需要设置改盒子宽高都为100%。

（3）初始化地图

    // 地图中心坐标
    var myCenter = {
        lat: '30.65735',
        lng: '104.0658'
    };
    var myLatLng = new google.maps.LatLng(myCenter.lat, myCenter.lng);
    var myOptions = {
        zoom: 15,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), myOptions);

效果如下图（左一）

 

 

二、自定义信息窗口、自定义图标以及自定义控件

// 自定义Marker标记点
var marker = new google.maps.Marker({
     position:  myLatLng,
     icon: '../car.png',  // 如果为空则显示默认的图标
     map: map
});

// 自定义InfoWindow信息窗口
htmlWindow = "<div class='wrapBox'>\
                   <div>IMEI: " + imei + "</div>\
                   <div>Address：<span id='map-address'>" + pointToAddress(myCenter.lat, myCenter.lng) + "</span>" + info + "</div>\
                   <div>Speed：" + speed + " km/h</div>\
                   <div>Time：" + toDate(2018-12-17 16:12:50) + "</div>\
               </div>";

var infowindow= new google.maps.InfoWindow({
     content: htmlWindow,
     disableAutoPan:true //设置为true时可禁用自动平移功能
});

//打开信息窗体
infowindow.open(map, marker);

//marker点事件，点击关闭信息窗体
marker.addListener('click', function() {
    infowindow.close();
});

//监听X关闭按钮事件
google.maps.event.addListener(infowindow,"closeclick", function(){
    infowindow.close();
});

自定义标记和自定义信息窗口比较简单，效果如上图（中）。如果我们要改变地图默认的控件位置或需要自定义控件怎么办？接着往下看。

googl map默认开启的控件有：

mapTypeControl   // 地图类型控件
zoomControl   //地图缩小放大控件
streetViewControl   //小黄人街景控件
fullscreenControl   //全屏控件

默认没有开启的还有panControl、scaleControl、overviewMapControl、rotateControl:true等

// 关闭地图类型控件，打开缩小放大控件并设置其位置为坐下方
var myOptions2 = {
    zoom: 15,
    center: myLatLng,
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style:google.maps.ZoomControlStyle.SMALL,
        position:google.maps.ControlPosition.LEFT_BOTTOM
    }
};

其中，所有控件都有position属性，代表控件的位置，包括的选项有：OTTOM、BOTTOM_CENTER、BOTTOM_LEFT、BOTTOM_RIGHT、CENTER、LEFT、LEFT_BOTTOM、LEFT_CENTER、LEFT_TOP、RIGHT、RIGHT_BOTTOM、RIGHT_CENTER、RIGHT_TOP、TOP、TOP_CENTER、TOP_LEFT、TOP_RIGHT。记不住没有关系，你不妨console.log(google.maps.ControlPosition)试试。

而只有部分控件有style属性，而且各不相同。

// 自定义控件样式
function HomeControl(controlDiv, map) {
    controlDiv.style.padding = '5px';
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#ffffff';
    controlUI.style.border='1px solid #cccccc';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'my title';
    controlDiv.appendChild(controlUI);
    var controlText = document.createElement('div');
    controlText.style.fontFamily='Arial,sans-serif';
    controlText.style.fontSize='14px';
    controlText.style.height = '50px';
    controlText.style.width = '50px';
    controlText.innerHTML = '<b><span>105</span><label>km/h</label><b>';
    controlUI.appendChild(controlText);

    // 自定义控件的点击事件:
    google.maps.event.addDomListener(controlUI, 'click', function() {
        alert('111');
    });
}

// 自定义控件
function myControl() {
    var homeControlDiv = document.createElement('div');
    var homeControl = new HomeControl(homeControlDiv, map);
    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv);
}

google.maps.event.addDomListener(window, 'load', myControl);

默认空间的位置调整和自定义控件完成，效果如上图（右一）。

 

三、地址解析

// 地址解析方法
function pointToAddress(lat, lng, backcall) {
    // 实例化Geocoder服务用于解析地址
    var geocoder = new google.maps.Geocoder();
    // 地理反解析过程
    // 请求数据GeocoderRequest为location,值类型为LatLng因此我们要实例化经纬度
    geocoder.geocode({ location: new google.maps.LatLng(lat, lng) }, function geoResults(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
             backcall(results[0].formatted_address);
        } else {
             console.log("：error " + status);
        }
    });
}

// 在需要解析的地方调用方法
pointToAddress(myCenter.lat, myCenter.lng, function (address) {
    // 获得地址
    console.log(address);
});

我们看到地图上控件名称显示的是中文，如果用户手机系统是英文，地图也会自动切换为英文。暂时更新到这里，关于google map实现轨迹回放请前往博主的另外一篇文章。