不错的文章，内容惜墨如金.禁止此消息：
不错的文章，内容文笔极佳.禁止此消息：
不错的文章，内容惜墨如金.禁止此消息：
不错的文章，内容栩栩如生.禁止此消息：
不错~~~~~~
JORDAN(乔丹)
好卡帕哦~ 外星人
这里是广告
日期：　评论：31　浏览：5894
日期：　评论：23　浏览：9580
日期：　评论：15　浏览：4931
日期：　评论：7　浏览：1141
日期：　评论：21　浏览：9810
日期：　评论：11　浏览：766
日期：　评论：9　浏览：983
日期：　评论：8　浏览：937
日期：　评论：8　浏览：1935
　闽ICP备号 Copyright (C) 掏粪男孩 All Rights Reserved.温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&html&&head&&script type="text/javascript" src="/maps/api/js?sensor=false"&&/script&&script type="text/javascript"&& && & var query1 = new Array("大雁塔","大雁塔南广场","大雁塔北广场");& & var display = "&b&单位：&/b&test";& & function initialize() {& & & geocoder = new google.maps.Geocoder();& & & & var myOptions = {& & & & & & zoom: 16,//缩放比例& & & & & & mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型 ?MapTypeId.ROADMAP ?MapTypeId.SATELLITE ?MapTypeId.HYBRID ?MapTypeId.TERRAIN&& &&& & & & }& & & & map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);& & & & codeAddress();& & }& & function codeAddress() {
for(var i = 0 ; i & query1. i++){
var address = query1[i];
geocoder.geocode({ 'address': address }, function (results, status) { //地址解析& & & & & & if (status == google.maps.GeocoderStatus.OK) {& & & & & & & & map.setCenter(results[0].geometry.location);//依据解析的经度纬度设置坐标居中& & & & & & & & var marker = new google.maps.Marker({& & & & & & & & & & map: map,& & & & & & & & & & position: results[0].geometry.location,& & & & & & & & & & title:results[0].address_components[0].long_name,& & & & & & & & & & animation: google.maps.Animation.DROP //坐标动画效果& & & & & & & & });& & & & & & & & var infowindow = new Window({& & & & & & & & & & content: "&span style='font-size:11px'&&b&地址：&/b&" + results[0].address_components[0].long_name + "&br&" +results[0].address_components[0].long_name + "&/span&",& & & & & & & & & & pixelOffset:0, //坐标偏移量，一般不用修改& & & & & & & & & & position: results[0].geometry.location& & & & & & & & });& & & & & & & & //infowindow.open(map, marker);//默认打开信息窗口。点击做伴弹出信息窗口& & & & & & & & google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); });& & & & & & } else {& & & & & & & & alert("未能解析该地址的原因: " + status);& & & & & & }& & & & });
}& & }&/script&&/head&&body onload="initialize()"&&div id="map_canvas" style="width:800 height:800"&&/div&&/body&&/html&
阅读(1685)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'google map v3 显示多个marker,title',
blogAbstract:'&!DOCTYPE html&&html&&head&&script type=\"text/javascript\" src=\"/maps/api/js?sensor=false\"&&/script&&script type=\"text/javascript\"&& && & var query1 = new Array(\"大雁塔\",\"大雁塔南广场\",\"大雁塔北广场\");',
blogTag:'googlemaps',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:1,
publishTime:1,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}给网站页面添加Google地图
很多网站喜欢在关于或联系我们页面中 添加一个Google地图,
以章显正规, 在
上也可以很容易的添加一个这样的东西; 而且操作上相对更容易,
地图引入自己的当前网站的方法有两种,
分别为 框架引用 和 通过 Google maps api 引用,
两种方法各有优缺点, 下面分别说一下
通过框架引用Google 地图 操作上便捷容易,
适合对代码不是很掌握的同学使用
缺点就是 定制性相对较差 页面中引入了框架结构.
通过Google maps api的方式引入Google
地图相对定制性较强, 应用面更宽泛一些
缺点就是需要自己有一定的动手能力.
废话说完 下面开始动手 实际操作如何将 Google
地图引入自己的网站;
先说 第一种方法 框架引用
一& 登录自己的google 帐户
(不登录也可以)
三 在搜索框中输入自己想要在地图上标注的地址信息 (参见图 1
黄色高亮标注)
四 右上角 工具栏点击 link , 复制位于 Paste HTML to
embed in website 下的调用代码 (参见图 1 绿色高亮标注)
五 打开自己的Zen Cart 并进入后台 然后 工具 简易页面
关于或联系我们 将Google 地图调用代码粘贴在适当的位置 上即可;
(点击图片查看大图)
继续 第二种方法 Google maps API
/intl/zh-CN/apis/maps/signup.html
二 在这里按提示输入相关信息 申请一个 Google maps
API& 密钥 并复制保存记录好 (如图2 标示)
2&& 点击图片查看大图
三 打开 includes/templates/你的当前模板目录/common/html_header.php
在 &/head& 前
&script src="/maps?file=api&v=3&sensor=true&key=你的Key" type="text/javascript"&&/script&
四 继续 在 &/head& 前
加入下面的 JS 详细说明参见代码中的 注释
&script type="text/javascript"&
//initMap()函数，将地图程序加入页面
function initMap() {
//GBrowserIsCompatible()确定Api能否兼容当前浏览器
if (GBrowserIsCompatible()) {
//在ID为"Gmap"的层内显示地图
var map = new GMap2(document.getElementById("Gmap"));
//定义一个经纬度点
var point = new GLatLng(<span STYLE="CoLor: #cc, <span STYLE="CoLor: #cc);
//定义一个标注对象
var marker = new GMarker(point);
//在地图上加入标注
map.addOverlay(marker);
//定义字符串
var info = "&font color='#87 Budapest & K&#337;b&nyai &Ut 29&/font&";
//设置点击出现冒泡，内容为预先定义的HTML字串
marker.bindInfoWindowHtml(info);
//设置地图中心点和缩放级别
map.setCenter(new GLatLng(<span STYLE="CoLor: #cc, <span STYLE="CoLor: #cc), 12);
//加载大“鱼骨”，包含方向、缩放按钮和缩放级别控制滑块
map.addControl(new GLargeMapControl());
//加载地图类型按钮
map.addControl(new GMapTypeControl());
//加载小地图
map.addControl(new GOverviewMapControl());
//加载比例尺
map.addControl(new GScaleControl());
五 在需要引入地图的页面中适当的位置 加入 下面的代码
详细说明参见代码中的注释
至此 在网站中引入Google 地图的两种方法介绍完毕!
&要点提示:
一. 使用 google maps
api 的方式引入地图 在页头导入 对应的JS库时 你的Key 对应 你所申请到的 密钥
二. google maps api
密钥的申请地址, 最好使用与当前网站语言一至的语言申请, 在方法二中的提供的申请地址为简体中文地址 在此地址右上角
有对应的语言选择
三. 配置 google maps
api 涉及到的标注地址 经纬度 可通过如下方式获取;
2. 如图1 中 黄色高亮标示 在这里输入要查询的地址并回车
3. 在浏览器 将下面的JS代码粘贴并回车 就会得到对应的地址经纬度
javascript:void(prompt('',gApplication.getMap().getCenter()));
4. 复制得到的经纬度值 粘贴到JS配置项中对应的代码位置上
四. 页面地图层 的样式调整
可按实际情况配置 比如宽高
对于方法一 可调整 引用代码中&
width:值& 和
height: 值 控制宽高
对于方法二 可调整 style="width: 650 height: 420 中的值来控制
或另行指定样式类或ID来控制调整样式
五. 无论哪种方法, 在Zen Cart
自定义页面中 引入地图粘贴代码时 请将当前编辑器切换到文本编辑器或 HTML 代码状态下粘贴
如果你有足够的耐心和想要更多的去了解一下 Google maps api 哪么可以仔细的看下 Google 官方提供的帮助手册,
不过我估计十之八九会让大部分同学看的云里雾去,不知所然, Google 的帮助说明总是弄的这么高深&
Google maps API 帮助手册地址:
/intl/zh-CN/apis/maps/documentation/javascript/basics.html
最后附一张 通过 Google maps api 方式引入的效果 截图
(点击图片查看大图)
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Google Map API 根本使用方法_6C社区
Google Map API 根本使用方法
Google Map API 根本使用方法
Google Map API 基本使用方法
方法说明：
1、GBrowserIsCompatible() -- 是否支持Google Map API
2、shopLat -- 酒店的经度坐标，
shopLng -- 酒店的纬度坐标
3、new GLatLng(shopLat, shopLng) -- 设置经纬度
4、map.setCenter(new GLatLng(shopLat, shopLng), 14) -- 设置地图默认的中心点经纬度
参数说明：
new GLatLng(shopLat, shopLng) -- 设置中心点的经纬度
14 -- 地图的默认缩放比例大小值，范围为1 - 18
5、new GMap2(document.getElementById("shopgooglemap")) -- 获取显示的地图容器
6、map.setMapType(G_NORMAL_MAP); -- 设置显示地图的类型
1. G_NORMAL_MAP -- 默认地图样式
2. G_SATELLITE_MAP -- Google Earth 卫星地图
3. G_HYBRID_MAP -- 混合模式地图
7、new GIcon(G_DEFAULT_ICON) -- 设置标记样式
8、addControl() -- 给地图添加控件
常用的可选控件：
1. new GLargeMapControl() -- 大的地图缩放级别控件
2. new GOverviewMapControl() -- 地图缩略图控件
3. new GScaleControl() -- 比例尺控件
4. new GMapTypeControl() -- 地图类形选择控件
9、enableDoubleClickZoom() -- 双击（鼠标右键）放大/（鼠标左键）缩小地图比例
10、map.enableScrollWheelZoom() -- 滚动滑轮方法（向前）放大/（向后）缩小地图比例
11、enableContinuousZoom() -- 允许连贯改变地图比例
12、createMarker(latlng) -- 自定义方法：
方法说明：
new GMarker(latlng) -- 在地图中设置标签，参数latlng -- 标签的坐标
Event.addListener(marker,event,function) -- 给标签设置事件
参数说明：
marker -- 标签对象,
event -- 事件名称
function -- 时间的处理函数
openInfoWindowHtml(latlng, myHtml) -- 将信息框添加到标签上
参数说明：
latlng -- 标签坐标,
myHtml -- 提示信息的HTML字符串 ===============================================================================
获取地图中心坐标：javascript:void(prompt('中心坐标',gApplication.getMap().getCenter()));
===============================================================================
function initMap(){
if(GBrowserIsCompatible()){
var shopLat=message[0][0];
var shopLng=message[0][1];
var map = new GMap2(document.getElementById("shopgooglemap"));
map.setCenter(new GLatLng(shopLat, shopLng), 14);
function createMarker(latlng){
var marker = new GMarker(latlng);
marker.value=/web/0;
GEvent.addListener(marker,"click", function(){
var myHtml = "";
myHtml += "" + message[1][0] + ""
for(var j=1;j<message[1].j++){
myHtml += message[1][j]+"";
myHtml +="";
map.openInfoWindowHtml(latlng, myHtml);
var point = new GLatLng(shopLat,shopLng);
map.addOverlay(createMarker(point));
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.addControl(new GLargeMapControl())
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
alert("对不起，您的浏览器不支持创建地图！")
} } 本文地址： /article-.shtml 欢迎转载Google 地图 API 教程
Google 地图事件
点击标记缩放地图 - 绑定在google地图上的事件。
点击标记缩放地图
我们仍然使用上一遍文章使用的英国伦敦的地图。
点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件)。
代码如下：
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
使用 addListener() 事件处理程序来注册事件的监听。该方法使用一个对象，一个事件来监听，当指定的事件发生时
函数将被调用。
我们通过给地图添加事件处理程序来改变 'center' 属性，以下代码使用 center_changed 事件在3秒后标记移会中心点:
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
点击标记时打开信息窗口。
点击标记在信息窗口显示一些文本信息：
var infowindow = new google.maps.InfoWindow({
content:&Hello World!&
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
设置标记及打开每个标记的信息窗口
当用户点击地图时执行一个窗口
用户点击地图某个位置时使用 placeMarker() 函数在指定位置上放置一个标记，并弹出信息窗口：
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'&br&Longitude: ' + location.lng()
infowindow.open(map,marker);
Google 地图 - 事件参考手册
记住登录状态
重复输入密码