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

huaixiaoz 发布于2019-08-22 11:01 / 2039人阅读

摘要：创建地图之后，基本上都需要标记位置的，就是那个圆点。然后参考谷歌的，找了许久，网址代码如下创建对象地图居中到当前坐标这段运行效果，就是你点击地图就会添加一个标记。

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

代码如下:



    
        Accessing arguments in UI events

这段运行效果，就是你点击地图就会添加一个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

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

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

超融合服务器专线服务谷歌地图api 谷歌地图api接口 js地图标记怎么清空谷歌地图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91639.html

谷歌地图 API 开发之添加标记（解析以及补充）

摘要：今天又看了下官网，发现官网上有地图标记的详细说明。请注意，上述方法并不会删除该标记。查看示例也可以参考上一篇文章，谷歌地图开发之添加标记其实跟官网的基本原理也是一样的。表示该标记应该在原地弹跳。将自动调整图标大小。今天又看了下官网，发现官网上有地图标记的详细说明。当时居然眼瞎看不见，还琢磨了好久...#$%^&，一定是项目太急，没看到(^o^)/~地址：https://develop...

崔晓明 2019-08-22 10:35 评论0 收藏0
谷歌地图 API 开发之信息窗口

摘要：信息窗口具有一个内容区域和一个锥形柄。添加信息窗口构造函数采用了对象字面量，后者为显示信息窗口指定了一组初始参数。其中包含此信息窗口锚定位置的。在标记上打开信息窗口将自动更新。用于指定信息窗口的最大宽度以像素为单位。信息窗口简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容（通常为文本或图像）。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。 ...

princekin 2019-08-20 10:13 评论0 收藏0
谷歌地图 API 开发之信息窗口

摘要：信息窗口具有一个内容区域和一个锥形柄。添加信息窗口构造函数采用了对象字面量，后者为显示信息窗口指定了一组初始参数。其中包含此信息窗口锚定位置的。在标记上打开信息窗口将自动更新。用于指定信息窗口的最大宽度以像素为单位。信息窗口简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容（通常为文本或图像）。信息窗口具有一个内容区域和一个锥形柄。柄顶部与地图上的某指定位置相连。 ...

rubyshen 2019-08-05 10:02 评论0 收藏0
谷歌地图 API 开发之新建地图

摘要：最近项目用到谷歌地图，但是看谷歌文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。显示了整个地球地图的完全缩放。最近项目用到谷歌地图，但是看谷歌api文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。但是因为本人太懒了，每次研究技术完事时间一久就忘了，更别提分享了，在朋友的鼓励支持之下，重新开始写博客，共享给大家...

Winer 2019-08-22 10:34 评论0 收藏0
关于谷歌Google Maps JavaScript API 的学习与分享

摘要：最近参与页面插入谷歌地图的项目，因此在此分享下我的学习经验，第一次写，请多担待首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现，展示详细信息以及对应的产品。最近参与页面插入谷歌地图API的项目，因此在此分享下我的学习经验，第一次写，请多担待！首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对...

keithyau 2019-08-05 17:18 评论0 收藏0