如何在Html中插入谷歌地图？ - CSDN博客
如何在Html中插入谷歌地图？
经过大半点的查找和尝试。终于做出一个简单的调用范例，在这里共享给大家。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"&&& ""&&html xmlns=""&& &head&&&& &meta http-equiv="content-type" content="text/ charset=utf-8"/&&&& &title&Google Maps JavaScript API Example&/title&
&!-- ajax地图搜索开始(如果只要简单的地图,这些可以去掉) --&& &!-- Note:&&& Make sure to replace the &key=internal with &key=~the value of your key~&&& in both the maps API script load and in the Ajax Search API script load statements& --&& &!-- maps api, ajax search api, map search control code --&& &script src=""&&& type="text/javascript"& charset='utf-8'&&/script&& &script src=""&&& type="text/javascript"& charset='utf-8'&&/script&& &script src=""&&& type="text/javascript"& charset='utf-8'&&/script&
& &!-- ajax search stylesheet, map search stylesheet --&& &link href="" rel="stylesheet"&&& type="text/css"/&& &link href=""&&& rel="stylesheet" type="text/css"/&& &style type="text/css"&&&& body, table, p{&&&&& background-color:&&&&& font-family: Arial, sans-&&&&& font-size: 13&&& }
&&& #mapsearch {&&&&& width : 400&&&&& margin-left: 10&&&&& padding: 4&&&&& border : 1px solid #f9f9f9;&&& }& &/style&&!-- ajax地图搜索结束 --&
&&!--以下代码是必须的。&这一段代码中可以修改key的参数,key的产生可以到以下地址：&&拖到页面底部,输入地址后点获取API就可以。&注：如果你输入的地址已经被注册过key，将无法得到key并且没有提示，只是跳到登录页。再试也没有用。&--&&&& &script &src=""&&&&&&&&&&& type="text/javascript"& charset='utf-8'&&/script&&&& &script language="javascript" type="text/javascript"&& charset='utf-8'&&&& //&![CDATA[
&&& function load() {&&&&& if (GBrowserIsCompatible()) {&&&&&&& var map = new GMap2(document.getElementById("map"));
&&map.addControl(new GSmallMapControl());&&map.addControl(new GMapTypeControl());&&//以上GSmallMapControl添加左上角放大缩小的控件&&//GMapTypeControl添加右上角[地图][卫星][混合地图控件]&&//注：在以上两句代码前面或之间不可以写注释，否则看不到控件哦。嘿嘿，注释写这里喇。&&//如果只要简单地图，以上两句可以不要
&&//参数(经伟度)：23.59, 113.13&&//获得方法：打开，输入你要设成地图中心点的地址。&&//在IE地址栏中输入以下代码按回车：javascript:void(prompt('',gApplication.getMap().getCenter()));&&//此时将会弹出一个对话框，里面的内容就是你要的经伟度。
&&//参数(地图放大倍数):15&&//设得太高可能看不到地图。&&&&&&& map.setCenter(new GLatLng(23.552, 113.07), 15);&&&&& }
&& //如果只是想要一张最简单的地图，以下代码可以不加&&//随机产生10个地理标识。如不需要可以不加&&var bounds = map.getBounds();&&var southWest = bounds.getSouthWest();&&var northEast = bounds.getNorthEast();&&var lngSpan = northEast.lng() - southWest.lng();&&var latSpan = northEast.lat() - southWest.lat();&&for (var i = 0; i & 10; i++) {&&& var point = new GLatLng(southWest.lat() + latSpan * Math.random(),&&&&&&&&& southWest.lng() + lngSpan * Math.random());&&& map.addOverlay(createMarker(point, i + 1));&&}
&&//使用自定义图标创建标注&&var baseIcon = new GIcon();&&baseIcon.shadow = "";&&baseIcon.image="";&&baseIcon.iconSize = new GSize(20, 34);&&baseIcon.shadowSize = new GSize(37, 34);&&baseIcon.iconAnchor = new GPoint(9, 34);&&WindowAnchor = new GPoint(9, 2);&&ShadowAnchor = new GPoint(18, 25); &&&&//创建中心点标注&&var center = new GMarker(map.getCenter(),baseIcon);&&GEvent.addListener(center, "click", function() {&&¢er.openInfoWindowHtml("广州市白云区三元里大道959号");&&});&&//添加标注到地图上。&&map.addOverlay(center);
&&//标识地图中心&&//map.openInfoWindow(map.getCenter(),&&&&&&& //&&&&&&&&& document.createTextNode("we are here"));
&&//创建一个目标地点的标识。&&//通常我们做google地图是为了将企业地址标识到地图上,方便别人找到。比如说(富华酒店)。&&//以下代码就是在打开地图的时候，在地图中心点显示一个云一样的框框，指示说这里就是目标地点。&&&/*&&var marker = new GMarker(map.getCenter());&&GEvent.addListener(marker, "click", function() {&&& marker.openInfoWindowTabsHtml(infoTabs);&&});&&map.addOverlay(marker);&&marker.openInfoWindowTabsHtml(infoTabs);&&*/
&&//以下是添加一个地理标识(可以让使用者拖动的,不一定实用)&&/*&&var center = new GLatLng(23.552, 113.07);&&var mk1 = new GMarker(center, {draggable: true});&&GEvent.addListener(mk1, "dragstart", function() {&&& map.closeInfoWindow();&&& });&&GEvent.addListener(mk1, "dragend", function() {&&& mk1.openInfoWindowHtml("Just bouncing along...");&&& });&&map.addOverlay(mk1);&&*/
&&//编码折线。我不是绘测专家，所以这里的含义不太懂，想要了解更多请访问以下网址：&&//http://www.codechina.org/doc/google/gmapapi/#Display_Info_Windows_Above_Markers&&/*&&var polyline = new GPolyline([&&&new GLatLng(23.97),&&&new GLatLng(37.97),&&&new GLatLng( 37.97)&&], "#FF0000", 10);&&map.addOverlay(polyline);&&*/&&&&&&& &&//如果想要添加动画效果,请看这里吧。&&/*&&window.setTimeout(function() {&&& map.panTo(new GLatLng(23.552, 113.07));&&}, 1000);&&*/&
&//在参数中可以设定显示的文字&/*&这里如果要以Tab页签形式显示地图,可以加上。&var infoTabs = [&& new GInfoWindowTab("center", "We are here!"),&& new GInfoWindowTab("Tab #2", "This is tab #2 content")&];&*/&//参数一是页签名字,参数二是显示的页签内容,内容可以是中文，但是如果你用EditPlus编辑代码，文件必须以UTF-8的格式保存，而不仅仅是在面页上设置chartset="utf-8"。&var infoTabs = [&& new GInfoWindowTab("center", "We are here!")&];
&//创建地理标识的方法。&function createMarker(point, number) {&& var marker = new GMarker(point);&& GEvent.addListener(marker, "click", function() {&&marker.openInfoWindowHtml("Marker #&b&" + number + "&/b&");&& });&&&}
&&& //]]&&&& &/script&
& &/head&& &body onload="load()" onunload="GUnload()"&&&& &div id="map" style="width: 500 height: 300px"&&/div&&&div id="mapsearch"&Loading...&/div&& &/body&&/html&
本文已收录于以下专栏：
相关文章推荐
HTML5提供对用户地理位置进行定位的功能。
    可以使用：navigator.geolocation.getCurrentPosition() 方法获取用户的当前经度和纬度
    方法如下：首...
要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：
1、最简单的方法 ----使用谷歌地图主页的&链接&
      如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地...
http://m.blog.csdn.net/article/details?id=5697384
我们经常使用地图查位置、看公交、看街景，同时地图还开放第三方的API给开发者。利用这些API进行地图的个性化的展示和控制，例如北京被水淹了，开发一个网页显示北京被淹的地图，地图上面标志被水淹的位置、严...
场景：JQuery Mobile代码片段：
$('#mylocation').live('pageshow', function () {
if (navigator.onLine) {
1 html页面
location.html
&meta http-equiv=&description& content=&this is my page
本文介绍如何创建一个使用谷歌地图和Elasticsearch的MVC应用程序进行geo_distance搜索，并找到最近的点（文档）到您的位置。
Elasticsearch索引使用geo_point...
他的最新文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)谷歌地图加入著名景点简介功能 仅支持桌面版
谷歌地图加入著名景点简介功能 仅支持桌面版
时间：日09:36 来源：驱动中国
原标题：谷歌地图加入著名景点简介功能 仅支持桌面版
　　5月16日消息，据国外媒体报道，谷歌为Google Maps （谷歌地图）加入了基于 Knowledge Graph 的信息卡片功能。　　据报道，现在，用户搜索一些著名景点时，会看到该景点的信息简介，诸如泰姬陵、吴哥窟等著名景点已经被包含在内。　　不过，目前该功能仅可以在桌面版Google Maps中使用，移动端还需要等些日子。
本文相关推荐