google maps v3 添加自定义图标(marker,overlay)

google搜了很久都没找到符合v3版本的google maps自定义图标,可以让图标使用自己的html,都是V2版本的,依靠重写google api属性来完成. 然后就找了个jquery下的google maps插件: GMAP3(http://gmap3.net) 经过研究发现...这货很方便,而且我也实现了自己的图标! 我的自定义图标使用的是bootstrap插件:font-awesome中的icon. 首先,引入 <link href="bootstrap.css" re…

Google Maps V3 之路线服务

概述您可以使用 DirectionsService 对象计算路线(使用各种交通方式).此对象与 Google Maps API 路线服务进行通信,该服务会接收路线请求并返回计算的结果.您可以自行处理这些路线结果,也可以使用 DirectionsRenderer 对象呈现这些结果. 您可以通过文本字符串(例如,“伊利诺斯州芝加哥市”或“澳大利亚新南威尔士州达尔文市”)或 LatLng 值的形式来指定路线的起点和终点.路线服务可以使用一系列路标返回多段路线.路线可以显示为一条在地图上绘制路线的折线…

［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法

在Google Maps API的使用中,经常用到Clusterer来避免过密的Marker显示.但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法,那遇到这样的需求,怎么做呢?以下是我从StackoverFlow上获得的解答,也是实践下来最佳的方法: // Create marker clusterer // map: google.maps.Map Object // markerArray: [google.maps.Marker Object1, googl…

Google Maps API V3 之绘图库信息窗口

Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 之控件 Google 地图 API V3 之叠加层 Google Maps API V3 之绘图库信息窗口 Google Maps API V3 之图层 Google Maps API V3 之路线服务绘图库本文档中的概念仅适用于 google.maps.drawing 库中提供的地图项…

Google Maps API V3 之图层

Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 之控件 Google 地图 API V3 之叠加层 Google Maps API V3 之绘图库信息窗口 Google Maps API V3 之图层 Google Maps API V3 之路线服务图层概述图层是地图上的对象,包含一个或多个单独项,但可作为一个整体进行操作.图层通常反…

Google Maps API V3 之路线服务

Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 之控件 Google 地图 API V3 之叠加层 Google Maps API V3 之绘图库信息窗口 Google Maps API V3 之图层 Google Maps API V3 之路线服务概述您可以使用 DirectionsService 对象计算路线(使用各种交通方式).…

☀【移动】Google Maps JavaScript API v3

Google Maps JavaScript API v3https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn GPSspghttp://www.gpsspg.com/maps.htm <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewp…

google maps js v3 api教程(3) -- 创建infowindow

原文地址前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOptions). InfoWindowOptions对象指定用于显示信息窗口的初始化参数. InfoWindowOptions对象属性: content:包含一个文本字符串或信息窗口中显示DOM节点. pixelOffset:表示信息窗口的位置偏移. position:infowindow显示的位置(…

google maps js v3 api教程(2) -- 在地图上添加标记

原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图之后,怎么往地图上添加标记呢? google为我们提供了google.maps.Marker这个构造函数,来创建标记. 这个函数有一个object类型的可选参数,常用的成员有: { position: new google.maps.LatLng(lat,lng), //标记的经纬度 map:map…

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

MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储.详情请参考:MBTiles移动存储简介. 在WEB地图介绍中我们看到,瓦片是参照了他们的z/x/y 形式坐标,在磁盘存储上,他们通常存储在以z.x为名字上的目录中,这样就有一个瓦片文件路径是0/0/0.png. 同样用谷歌或百度地图JS API很方便调用.但是有个缺点就是文件多了,占用磁…

google maps js v3 api教程(1) -- 创建一个地图

原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前,我们进入 Google Developers Console创建一个key,用于我们开发地图的身份验证(当然,没有key也可以进行接下来的教程) 创建一个简单的地图: <!DOCTYPE html> <html> <head> <title>Simple Ma…

检索Google Maps地图位置（小训练）

名称:检索地图位置内容:地图初期显示和检索显示功能:根据条件检索地图的经度与纬度 1.在这之前我们需要创建一个表(Accoun__c),添加一个重要的字段地理位置情報,它会默认的给你两个字段经度和纬度. 2.然后在Eclipse中往表的字段添加一些内容 3.因为需要调数据,所以要page页面与控制器进行交互 4.这里我用到了@RemoteAction(远程操作)的Ajax请求,具体代码如下: <apex:page controller="CL_MapDoSearchController…

Google Maps API显示地图的小示例

来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="te…

Google maps API开发（一）(转)

一.加载Google maps API <script type="text/javascript" src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script> 您可以…

Creating a Store Locator with PHP, MySQL & Google Maps(保存地图坐标经纬度方法 google mysql)

Google Geo APIs Team August 2009 This tutorial is intended for developers who are familiar with PHP/MySQL, and want to learn how to use Google Maps with a MySQL database to create a store locator-type app. After completing this tutorial, you will hav…

使用google map v3 api 开发地图服务

Google Map V3 API 学习地址: http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/articles.html…

Google maps library的使用

公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置但是google marker使用过程中也有个问题,就是如果在google 地图上标注了大量的Marker, 一个是容易导致google地图加载速度变慢,另一个是marker太多,地图就很不好看,甚至是看不清楚了,因为你会发现地图就被这些Marker占据了在Google Maps API中,提供了集群来解决这个问题,也就是MarkerClusterer, 我们之…

Google maps API开发（二）(转)

这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder: 主要功能包括地址解析.反向解析.本地搜索.周边搜索等, 我这里主要有两个实例: 实例一.当你搜索一个地名的时候,解析它的经纬度信息,并在地图上描点实例二.搜索你的中心点所在区域的学校.商店等信息,并在地图上描点首先来讲讲实例一怎么实现: 1. 加载google api <script type="text/javascript"src="http://ditu.…

Google map v3 using simple tool file google.map.util.js v 1.0

/** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的(div)z-index不能小于(lt)0,否则鼠标地图无法进行地图操作(可以看到地图,不过你会万分苦恼(you will be Extremely distressed)) */ (function(){ window.map={}; window.lineFeature=null; window.markers=[]…

Google API v3 设置Icon问题处理

1.查看API实现 //虽然比较符合API实现的思想但这个没法; //会产生Uncaught TypeError: undefined is not a function //google API no example to using it var icon = new google.maps.Icon({ anchor:new google.maps.Point(0,0), origin:new google.maps.Point(0,0), scaledSize: new google.m…

Google map v3 using simple tool file google.map.util.js v 1.1

/** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的z-index不能小于0,否则鼠标地图无法进行地图操作(可以看到地图,不过你会万分苦恼) * @updateLog:在v1.0上添加了地图覆盖物视图显示自适应(核心代码map.fitBounds(bounds);),添加谷歌手机地图,轨迹回放全套测试通过(v1.0轨迹回放不可用)*/ (function(){ windo…

Google map v3 using simple tool file google.map.util.js v 1.2

更新添加日志:在1.1的基础上添加marker的文字显示.测距工具. /** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的z-index不能小于0,否则鼠标地图无法进行地图操作(可以看到地图,不过你会万分苦恼) */ (function(){ window.map={}; window.lineFeature=null; window.markers=[]; window…

国内使用Google Maps JavaScript API

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple markers</title> <style> html, body { heig…

Google maps API开发

原文:Google maps API开发 Google maps API开发(一) 最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧一.加载Google maps API <script type="text/javascript" src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8…

C# 程序自动批量生成 google maps 的KML文件

原文:C# 程序自动批量生成 google maps 的KML文件 google maps 的 KML 文件可以用于静态的地图标注,在某些应用中,我们手上往往有成百上千个地址,我们需要把这些地址和描述批量标注到 google maps 上去,如果手工来做,太耗时间,在这里我写了一个程序批量来生成这个 KML 文件. 首先看一下 KML 文件的格式: <?xml version="1.0" encoding="UTF-8"?> <kml xmlns=…

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

目前还是得墙 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple markers</title> <style> html, body…

HTML5获取地理位置信息并在Google Maps上显示

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0; padding:0;} .kingwell_test{font-size:12px; color:#333} #ms{height…

Google maps api demo 2

demo /** * @fileoverview Sample showing capturing a KML file click * and displaying the contents in a side panel instead of * an InfoWindow */ var map; var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml'; /** * Initializes the…

在Google Maps 上点击标签显示说明并保持不消失

JS如下: (function() { window.onload = function() { // Creating an object literal containing the properties // we want to pass to the map var options = { zoom: 3, center: new google.maps.LatLng(37.09,…

在Google Maps 上点击标签后显示说明

JS如下: (function() { window.onload = function() { // Creating an object literal containing the properties // you want to pass to the map var options = { zoom: 3, center: new google.maps.LatLng(37.0…

【google maps v3 添加自定义图标(marker,overlay)】的更多相关文章