在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 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
vue中render函数的使用详解
Oct 12 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 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函数method_exists()与is_callable()的区别
2013/06/21 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP代码加密的方法总结
2020/03/13 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python pip配置国内源的方法
2020/02/14 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
为什么要有struct关键字
2012/05/08 面试题
了解AppleTalk协议吗
2014/04/01 面试题
市场安全管理制度
2014/01/26 职场文书
军训自我鉴定100字
2014/02/13 职场文书
结婚保证书
2015/01/16 职场文书
主持人大赛开场白
2015/05/29 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers