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. aptitude

    aptitude比apt-get 要好用.是 Debian 及其衍生系统中功能极其强大的包管理工具.与 apt-get 不同的是,aptitude在处理依赖问题上更佳一些.举例来说,aptitude在 ...

  2. oracle 定义临时表

    创建Oracle 临时表,可以有两种类型的临时表: 会话级的临时表 事务级的临时表 . 1) 会话级的临时表因为这这个临时表中的数据和你的当前会话有关系, 当你当前SESSION不退出的情况下,临时表 ...

  3. dapper的一个小扩展以支持dataset

    废话不多,直接上方法 public static DataSet ExecuteDataSet(this IDbConnection cnn, IDbDataAdapter adapter, stri ...

  4. java时间格式大全

    java.util.*;import java.text.*;import java.util.Calendar; public class VeDate { /**  * 获取现在时间  *   * ...

  5. 2014年12月23日00:42:54——PS4

    http://tieba.baidu.com/p/3415598015?see_lz=1&pn=1 http://tieba.baidu.com/p/3188981817 http://tie ...

  6. 【CODECHEF】【phollard rho + miller_rabin】The First Cube

    All submissions for this problem are available. Read problems statements in Mandarin Chinese and Rus ...

  7. System V 信号量

    1 概述 计数信号量集semid_ds: struct semid_ds { struct ipc_perm sem_perm; struct sem *sem_base; //指向信号量结构数组 u ...

  8. erlang 里的if 和 case

    case Expression of Pattern1 [when Guard1] -> Expr_seq1; Pattern2 [when Guard2] -> Expr_seq2; … ...

  9. SQL Server中count(*), count(col), count(1)的对比

    让我们先看一下BOL里面对count(*)以及count(col)的说明: COUNT(*) 返回组中的项数.包括 NULL 值和重复项. COUNT(ALL expression) 对组中的每一行都 ...

  10. Ubuntu 13.10 PHP 5.5.x mcrypt missing – Fatal Error: Undefined function mcrypt_encrypt()!

    [原文]http://www.tuicool.com/articles/goto?id=myM7veR I had updgraded my Ubuntu from 13.04 to 13.10 la ...