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. UITableView自动滚动方法

    1: NSUInteger rowCount = [self.tableView numberOfRowsInSection:0]; NSIndexPath* indexPath = [NSIndex ...

  2. iOS9 UITableViewCell separatorInset设置为0分割线还是没有顶到头的问题

    只需要在自定义的Cell中添加以下代码即可 override func awakeFromNib() { super.awakeFromNib() layoutMargins = UIEdgeInse ...

  3. 滑动条 Trackbar［OpenCV 笔记9］

    OpenCV中没有实现按钮的功能,我们可以利用滑动条来实现按钮功能. , ); trackbarname 轨迹条的名字. winname 窗口的名字,轨迹条会依附在这个窗口上. value 一个指向整 ...

  4. Flash Professional CS6 安装zxp插件

    说明 头两天因工作原因需要使用DragonBones,他的工作方式是的Flash Professional CS5.5以上的环境. DragonBones提供的是一个文件名为:xzp的文件,在Wind ...

  5. 九度OJ 1078 二叉树遍历

    题目地址:http://ac.jobdu.com/problem.php?pid=1078 题目描述: 二叉树的前序.中序.后序遍历的定义: 前序遍历:对任一子树,先访问跟,然后遍历其左子树,最后遍历 ...

  6. php 商务网站购物车联动地址

    数据表如下: CREATE TABLE IF NOT EXISTS `china` (`region_id` smallint(5) unsigned NOT NULL,  `parent_id` s ...

  7. jquery中onclick="fn"中$(this)所代表的对象

    jquery中onclick="fn"中$(this)所代表的对象 js方法 function qiehuan(){ var src = $(this).attr("da ...

  8. 你需要了解的z-index世界

    本文摘自:飘零雾雨的博客 z-index的重要性 在我看来,z-index 给了我们日常工作中以极大的帮助,我们用它来定义元素的层叠级别(stack level).受益于它,你能做Popup, Dro ...

  9. zend studio 9.0.4 安装破解

    转载于 http://www.geekso.com/ZendStudio9-key 注册破解步骤第一步:如果已经安装过Zend Studio 9.0.4的,请打开Zend Studio 9.0.4,在 ...

  10. javascript第二遍基础学习笔记(一)

    1.兼容xhtml方法: <script> //<![CDATA[ ... ... //]]> </script> 2.文档模式: IE5.5引入,最初包含2种:混 ...