当前位置: 首页 > 编程笔记 >

在Google 地图上实现做的标记相连接

季俭
2023-03-14
本文向大家介绍在Google 地图上实现做的标记相连接,包括了在Google 地图上实现做的标记相连接的使用技巧和注意事项,需要的朋友参考一下

这里仅仅是将谷歌地图API的使用方法告诉大家,算是抛砖引玉吧,由于某些原因,谷歌已经远离大家了。


<!DOCTYPE html>

<html>

<head>

<title>GeoLocation</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<style>

    html, body, #map-canvas {

        margin: 0;

        padding: 0;

        height: 100%;

    }

</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script>

    var map;

    var poly;

    function initialize() {

    var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);

    var locations = [

    ['test1, accuracy: 150m', 31.1937077, 121.4158436, 100],

    ['test2, accuracy: 150m', 31.2937077, 121.4158436, 100],

    ['test3, accuracy: 150m', 31.0937077, 121.2158436, 100],

    ['test4, accuracy: 150m', 31.3937077, 120.4158436, 100],

    ['test5, accuracy: 150m', 31.1637077, 120.4858436, 100],

    ['test6, accuracy: 150m', 31.1037077, 121.5158436, 100]

    ];

    var mapOptions = {

    zoom: 13,

    center: myLatlng,

    mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    map = new google.maps.Map(document.getElementById('map-canvas'),

    mapOptions);

    // 线条设置

    var polyOptions = {

    strokeColor: '#00ff00',    // 颜色

    strokeOpacity: 1.0,    // 透明度

    strokeWeight: 4    // 宽度

    }

    poly = new google.maps.Polyline(polyOptions);

    poly.setMap(map);    // 装载

    /* 循环标出所有坐标 */

    /*for(var i=0; i<locations.length; i++){

    var loc = [];

    loc.push(locations[i][1]);

    loc.push(locations[i][2]);

        var path = poly.getPath();    //获取线条的坐标

        path.push(new google.maps.LatLng(loc[0], loc[1]));    //为线条添加标记坐标

    //生成标记图标

    marker = new google.maps.Marker({

        position: new google.maps.LatLng(loc[0], loc[1]),

        map: map

        // icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"

    });

    }*/

    var marker, i, circle;

    var iwarray = [];

    var infoWindow;

    var latlngbounds = new google.maps.LatLngBounds();

    var iconYellow = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");

    for (i = 0; i < locations.length; i++) {

        var loc = [];

        loc.push(locations[i][1]);

        loc.push(locations[i][2]);

            var path = poly.getPath();    //获取线条的坐标

        path.push(new google.maps.LatLng(loc[0], loc[1]));

        var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);

        latlngbounds.extend(latlng);

    if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && locations[i][0].indexOf("[Cached") >= 0 )) {

            marker = new google.maps.Marker({

                position: latlng,

                map: map,

                icon: iconYellow

            });

            var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#FF0000">' + locations[i][0] + '<font></strong><div>';

        } else {

            marker = new google.maps.Marker({

                position: latlng,

                map: map

            });

            var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#000000">' + locations[i][0] + '<font></strong><div>';

        }

        iwarray[i] = iw;

        google.maps.event.addListener(marker, 'mouseover', (function(marker,i){

                return function(){

                    infoWindow = new google.maps.InfoWindow({

                        content: iwarray[i],

                        maxWidth: 200,

                        pixelOffset: new google.maps.Size(0, 0)

                    });

                    infoWindow.open(map, marker);

                }

            })(marker,i));

        google.maps.event.addListener(marker, 'mouseout', function() {

            infoWindow.close();

        });

        circle = new google.maps.Circle({

            map: map,

            radius: locations[i][3],

            fillColor: '#0000AA',

            fillOpacity: 0.01,

            strokeWeight: 1,

            strokeColor: '#0000CC',

            strokeOpacity: 0.8

        });

        circle.bindTo('center', marker, 'position');

    }

    map.fitBounds(latlngbounds);

    var listener = google.maps.event.addListenerOnce(map, "idle", function()

        {

        var zoomLevel = parseInt(map.getZoom());

        if (zoomLevel > 13)

            map.setZoom(13);

        });

    }

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

</script>

</head>

<body>

    <div id="map-canvas"></div>

</body>

</html>

 类似资料:
  • 我有一个从Google maps下载静态图像的应用程序,将标记放置在我想要的位置(通过将参数传入Google static maps URL来放置)。但是,我也需要能够点击标记。我想我可以将x和y坐标转换为lon/lat,然后用这种方法计算出哪个标记被点击了,但我发现这并不容易。 我知道地图的尺寸(以像素为单位),缩放级别,以及地图的中心点(以像素和lon/lat为单位),所以我跟踪了这篇博文。不

  • 我有一堆标记,我可以在其中加载到谷歌地图上。我的问题是,相机不在标记之上。我可以将它集中在我所有的标记之上吗? 我正在使用以下代码添加标记: 我在堆栈上看了看,发现了这个问题,和我的问题一样: Android谷歌地图API V2中心标记 但它背后没有太多的背景,也不知道如何实现它。

  • 我正在用html/jsp页面主体中的Google地图做一个web动态项目。 我制作了一个函数,可以创建一个标记(lat、lng、map),并在标记的参数中使用一个特殊的image.png作为图标。 在我的地图中,我制作了两种不同的样式(地图的颜色…)“白天”和“夜晚”。 我想知道当用户点击夜间更改样式时,我如何更改标记的图标。事实上,标记的颜色不适合这种风格的地图... 我尝试用相同的名称初始化不

  • 我调用API,然后将JSON数据添加到arraylist中,然后调用arraylist数据,并将纬度和经度放置在地图上,放置多个标记。我相信我的问题是从ArrayList获取字符串,但我不知道如何解决它。 我正在从另一个类调用API 私有GoogleMap mMap;

  • 我已经添加了片段活动地图,并使用addMarker函数添加了几个标记,但我能够删除所有标记,我收到了不同标记列表的通知, 现在我想删除所有标记并添加新标记。 一种将所有标记保留在列表中并逐个删除的方法,(marker.remove()) 有没有更好的方法清除所有标记。

  • 试图制作一个小的Android应用程序,以谷歌地图标记的形式显示人们的位置。 当用户按下按钮出现在地图上时,应用程序会从Firebase JSON中检索用户数据并在地图上实时显示用户。如果用户移动,标记会随着他一起移动(当他的位置发生变化时删除并重新创建)。 一切都很好,除了当用户按下离开地图时,他的标记会保留在所有其他手机中,即使它已从Firebase JSON中删除。 有人能解释一下如何解决这