Google Maps JavaScript API v3
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn

GPSspg
http://www.gpsspg.com/maps.htm

<!DOCTYPE html>

<html>

  <head>

    <title>Simple Map</title>

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

    <meta charset="utf-8">

    <style>

        html, body, #map-canvas {

            height: 100%;

            margin: 0px;

            padding: 0px

        }

    </style>

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

    <script>

        var map

        var latLngArray = [

            {

                name: 'hangzhou',

                url: 'http://s.baomihua.com/phone/home.aspx#hangzhou',

                longitude: 30.27211440480,

                latitude: 120.15266418460

            },

            {

                name: 'shanghai',

                url: 'http://s.baomihua.com/phone/home.aspx#shanghai',

                longitude: 31.2274816320,

                latitude: 121.4772033691

            },

            {

                name: 'beijing',

                url: 'http://s.baomihua.com/phone/home.aspx#beijing',

                longitude: 39.8970943726,

                latitude: 116.4056396484

            }

        ]

        var markersArray = []

        function initialize() {

            var mapOptions = {

                zoom: 5,

                center: new google.maps.LatLng(31.2081033213, 121.4758300781)

            }

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

            if (latLngArray) {

                for (var i in latLngArray) {

                    addMarker(new google.maps.LatLng(latLngArray[i].longitude, latLngArray[i].latitude), latLngArray[i].url)

                }

            }

            showOverlays()

        }

        function addMarker(location, url) {

            var marker = new google.maps.Marker({

                position: location,

                map: map

            })

            markersArray.push(marker)

        }

        function showOverlays() {

            if (markersArray) {

                for (var i in markersArray) {

                    markersArray[i].setMap(map)

                    markersArray[i]._index = i

                    google.maps.event.addListener(markersArray[i], 'click', function() {

                        location.href = latLngArray[this._index].url

                    })

                }

            }

        }

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

    </script>

</head>

<body>

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

</body>

</html>

☀【移动】Google Maps JavaScript API v3的更多相关文章

  1. [转]MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

  2. MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

  3. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...

  4. google map javascript api v3 例子

    之前一直用百度map,但如果是国外的项目就需要用google地图.由于在国内屏蔽了google地图的服务,因此调用的是一个国内地址(开发用).这个地址没有用key,语言设置也还是中文的. //---- ...

  5. 国内使用Google Maps JavaScript API

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  6. 谷歌地图，国内使用Google Maps JavaScript API，国外业务

    目前还是得墙 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&q ...

  7. Google maps javascript API

    https://developers.google.com/maps/documentation/javascript/datalayer .... GeoJSON 是一种针对互联网上共享地理空间数据 ...

  8. Google Map: JavaScript API RefererNotAllowedMapError

    visite https://console.developers.google.com/apis/credentials and select the project you use. http:/ ...

  9. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

随机推荐

  1. web页面的生命周期

    1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请求 2.服务器软件(IIS)接收,它最终的目的就是为了向客户输出它请求的动态页面生成的html代码. 3.服务器不 ...

  2. 查内网虚拟机映射的公网IP

    1.访问ip138.com 2.curl ifconfig.me

  3. gcc 生成动态库时-fpic选项是什么意思。

    -f后面跟一些编译选项,PIC是其中一种,表示生成位置无关代码(Position Independent Code)

  4. Linux 经典面试题

    [Linux  经典面试题] 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文 ...

  5. ECMAScript位操作符

    在ECMAScript中,有少数的几个操作符可以对二进制位进行直接操作,这几个操作符本身直接对二进制进行操作,所有它们的本身是非常效率的,学习这一段有助于以后的优化以及理解. ECMAScript中采 ...

  6. textarea 超过字数

    <textarea name="></textarea> <div id="statementRowChk"></div> ...

  7. php练习5——简单的学生管理系统（隐藏控件的使用）

    要求:    程序:gradeManage.html和gradeManage.php          结果       注意:   1.使用隐藏控件时,得在不同表单下,不能在同一个表单下:   2. ...

  8. Linux自动备份MySQL数据库脚本代码

    下面这段Linux的Shell脚本用于每日自动备份MySQL数据库,可通过Linux的crontab每天定时执行 在脚本中可设置需要备份的数据库表清单,并且会将备份文件通过gzip压缩.需要注意的是, ...

  9. html网页音乐播放器自带播放列表

    基于网页的音乐播放器demo  http://pan.baidu.com/s/1dDgm7HR 自己diy了一个手机端在线音乐播放器演示地址http://shanxi2014.com/zhuandiz ...

  10. aspose.cells根据模板导出excel

    又隔十多天没写博客了,最近都在忙项目的事情,公司人事变动也比较大,手头上就又多了一个项目.最近做用aspose.cells根据模板导出excel报价单的功能,顺便把相关的核心记下来,先上模板和导出的效 ...