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


Posted in Javascript onJanuary 05, 2015

这里仅仅是将谷歌地图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>
Javascript 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 #Javascript
jQuery中attr()方法用法实例
Jan 05 #Javascript
jQuery实现自定义下拉列表
Jan 05 #Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 #Javascript
jQuery圆形统计图开发实例
Jan 04 #Javascript
jQuery中:selected选择器用法实例
Jan 04 #Javascript
jQuery中:checked选择器用法实例
Jan 04 #Javascript
You might like
PHP分页显示制作详细讲解
2008/11/19 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
linux下编译安装memcached服务
2014/08/03 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
python清除字符串中间空格的实例讲解
2018/05/11 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
护理专业推荐信
2013/11/07 职场文书
元宵晚会主持词
2014/03/25 职场文书
幸福中国演讲稿
2014/09/12 职场文书
户籍证明模板
2014/09/28 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
Win11 BitLocker 驱动器加密
2022/04/19 数码科技