谷歌地图API 开发之添加标记

2016-08-03 22:49:00

创建地图之后，基本上都需要标记位置的，就是那个圆点。然后参考谷歌的API，找了许久，网址：
https://developers.google.com...

代码如下:

        Accessing arguments in UI events            html,            body {                height: 100%;                margin: 0;                padding: 0;            }            # map {                height: 100%;            }            function initMap() {                var map = new google.maps.Map(document.getElementById('map'), {                    zoom: 4,                    center: {                        lat: -25.363882,                        lng: 131.044922                    }                });                map.addListener('click', function(e) {                    placeMarkerAndPanTo(e.latLng, map);                });            }            function placeMarkerAndPanTo(latLng, map) {                var marker = new google.maps.Marker({ //创建marker对象                    position: latLng,                    map: map                });                map.panTo(latLng); //地图居中到当前坐标            }

这段运行效果，就是你点击地图就会添加一个marker标记。然后就这样子...

我是想要一个marker标记呀！这么多，咋处理，心塞...
谷歌地图就不能给个完整的么，真的是╮(╯_╰)╭
然后百度谷歌了好久，就是没有想要的答案，程序猿的调bug心情，大家都懂的...

不过倒是收获一点，就是删除marker的命令：marker.setMap(null);

之后，就在点击事件里，加上marker.setMap(null)，加到方法里，结果是marker对象全部清空，并没有解决问题。
so，自己想了个办法，就是每点击一下，创建的marker对象就存到一个数组里，然后点击下一个重新创建marker的时候，就将前一个数组的对象删除掉。（不知道大家有什么好的建议，目前没找到合适的，也不清楚官网的正规方法是怎么做的...）

var markersArray = [];//添加坐标对象function addMarker(latLng, map) {    if(markersArray.length>0){        markersArray[0].setMap(null); //每次添加的时候，都要把之前的marker对象清空    };    markersArray.shift(marker);    //然后再移出数组    marker = new google.maps.Marker({        position: latLng,        map: map    });    markersArray.push(marker); //将新的marker对象添加到数组}

作为程序员，也都知道大家的习性，都是希望拿来的代码直接能用是不是，我一向都是帅气善良体贴的man，代码如下：

        Simple Map            html,            body {                height: 100%;                margin: 0;                padding: 0;            }            # map {                height: 100%;            }            function initMap() {                var myLatlng = {                    lat: -25.363,                    lng: 131.044                };                var marker ;                var markersArray = [];                var map = new google.maps.Map(document.getElementById('map'), {                    zoom: 4,                    center: myLatlng                });                map.addListener('click', function(e) {                    addMarker(e.latLng, map);                });                //添加坐标对象                function addMarker(latLng, map) {                    if(markersArray.length>0){                            markersArray[0].setMap(null);                    };                    markersArray.shift(marker)                    marker = new google.maps.Marker({                        position: latLng,                        map: map                    });                    markersArray.push(marker);                }            }

好了，至此就能添加marker了。如果有其它方法，还希望大家能给我提个意见(^o^)/~

时间不够了，剩下的下一篇再写，如何获取当前点击的坐标以及城市街道地址等。

关键字：JavaScript, 谷歌地图, 开放平台, marker

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！