google地图开发(1)，增删创建地图、marker标记、信息弹窗、反向地理编码

前提

首先要去google地图申请一个api_key，教程参考:https://blog.csdn.net/Ariel_201311/article/details/94441085
然后要多看文档google地图api

正文

引入谷歌地图

//vue的话在根目录的index.html引入即可
<script src="https://maps.googleapis.com/maps/api/js?key=申请到的key"</script>

初始化地图

function initMap(){
	//第一个参数传存放地图的标签，第二传参数是地图的配置为object格式
	const map = new google.maps.Map(document.getElementById("map"), {
	    center: new google.maps.LatLng(39.915168, 116.403875), //地图的中心点
	    zoom: 10, //地图缩放比例
	    mapTypeId: google.maps.MapTypeId.ROADMAP, //指定地图展示类型：卫星图像、普通道路
	    mapTypeControl: false,//是否显示地图类型组件,false则不显示
	    fullscreenControl: false, //是否显示全屏按钮,false则不显示
	    scrollwheel: true, //是否允许滚轮滑动进行缩放
	});
	// 监听地图的点击事件
    datas.map.addListener('click', (e) => {
        /* e.latLng 获取经纬度对象
         * e.latLng.lat(), e.latLng.lng()获取经度和纬度 */
         //可以进行增加marker，获取地址等操作
    });
}

增加marker

/*这样做每次点击都会生成一个新的marker点，如果只需要一个marker则只在初始化的时候生成一个marker，
然后通过marker.setPosition({lat：23.5645,lng:116.403875})来改变marker位置*/
//positon是经纬度对象
function addMarker(position) => {
    //将地图移动到点击的位置,map是创建地图的变量
    map.panTo(position);
    //添加标记点
    const marker = new google.maps.Marker({
        position,//经纬度
        map,//创建的地图变量
        animation: google.maps.Animation.DROP,
        //marker出现的动画,还有一种是google.maps.Animation.BOUNCE，效果一直跳，通过调用marker.setAnimation(null)才会停止。
    });
    
    //将每一个marker加近数组是为了等下可以做清空操作，这里如果是vue的话不能用data创建响应式变量,否则清空不了
    const markers = [];
    markers.push(marker);

    // 通过监听点击事件打开显示信息窗口
    marker.addListener("click", () => {
    	//生成信息弹窗
        new google.maps.InfoWindow({
            content:'哈哈哈哈哈',
        }).open(map, marker);
        //map,marker都是你创建的地图和标记点变量
    })
}

清空marker

// 清空所有标记
function deleteMarker(){
     for (let i = 0; i < markers.length; i++) {
         markers[i].setMap(null);
     }
     //markers 是存放所有marker标记的数组
     markers = [];
 }

反向地理编码(将经纬度转成地址信息)

function geocode(position){
        new google.maps.Geocoder().geocode({
            'latLng': position //传入经纬度
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                // 判断是否能详细到街道，不能则只显示到区
                if (results[0].formatted_address.indexOf('Unnamed Road') == -1) {
                     var address = results[0].formatted_address + "<br />";
                 } else {
                     var address = results[1].formatted_address + "<br />";
                 }
                 address += "纬度：" + position.lat() + "<br />";
                 address += "经度：" + position.lng();
            } else {
                alert("Geocoder failed due to: " + status);
            }
        });
    }