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

181 阅读 0 评论 120 点赞

我是靠谱客的博主聪慧冷风，最近开发中收集的这篇文章主要介绍在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>