谷歌离线地图apicss代码（谷歌地图接入）

本篇文章给大家谈谈谷歌离线地图apicss代码，以及谷歌地图接入对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、谷歌地图 API
• 2、网站想集成GOOGLE的地图服务
• 3、GoogleMap v3 API详解，该怎么解决
• 4、如何用Google离线API调用离线地图

谷歌地图 API

在key后加一段代码就好 ，我也遇到过这种问题。具体方法如下：

script src=";v=2key=您的key

type="text/javascript" charset="utf-8"/script

其中charset="utf-8"为后加的代码。

好使的话别忘了请我吃饭啊, 呵呵！

网站想集成GOOGLE的地图服务

你想实现 这上面的具体什么功能呢？

这是两个代码，其实就是Google maps 的examples中的

根据这两个就可以实现你要的功能

有什么不明白的参照Google maps api吧

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

""

html xmlns=""

head

meta http-equiv="content-type" content="text/html; charset=utf-8"/

titleGoogle Maps API Example - Google North America Offices/title

script src=";v=2key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQcTQoRJ_JVFHVwderj38GcfiXt6hQX5E6h3W3sV-l-QbtgIls1pN0iAw"

type="text/javascript"/script

script src="google_northamerica_offices.js" type="text/javascript"/script

script src="../src/markermanager.js"/script

script type="text/javascript"

//![CDATA[

var map;

var mgr;

var icons = {};

var allmarkers = [];

function load() {

if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map"));

map.addControl(new GLargeMapControl());

map.addControl(new GOverviewMapControl());

map.setCenter(new GLatLng(50, -98), 3);

map.enableDoubleClickZoom();

mgr = new MarkerManager(map, {trackMarkers:true});

window.setTimeout(setupOfficeMarkers, 0);

}

}

function getIcon(images) {

var icon = null;

if (images) {

if (icons[images[0]]) {

icon = icons[images[0]];

} else {

icon = new GIcon();

icon.image = "images/"

+ images[0] + ".png";

var size = iconData[images[0]];

icon.iconSize = new GSize(size.width, size.height);

icon.iconAnchor = new GPoint(size.width 1, size.height 1);

icon.shadow = "images/"

+ images[1] + ".png";

size = iconData[images[1]];

icon.shadowSize = new GSize(size.width, size.height);

icons[images[0]] = icon;

}

}

return icon;

}

function setupOfficeMarkers() {

allmarkers.length = 0;

for (var i in officeLayer) {

var layer = officeLayer[i];

var markers = [];

for (var j in layer["places"]) {

var place = layer["places"][j];

var icon = getIcon(place["icon"]);

var title = place["name"];

var posn = new GLatLng(place["posn"][0], place["posn"][1]);

var marker = createMarker(posn,title,icon);

markers.push(marker);

allmarkers.push(marker);

}

mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);

}

mgr.refresh();

}

function createMarker(posn, title, icon) {

var marker = new GMarker(posn, {title: title, icon: icon, draggable:true });

GEvent.addListener(marker, 'dblclick', function() { mgr.removeMarker(marker) } );

return marker;

}

function deleteMarker() {

var markerNum = parseInt(document.getElementById("markerNum").value);

mgr.removeMarker(allmarkers[markerNum]);

}

function clearMarkers() {

mgr.clearMarkers();

}

function reloadMarkers() {

setupOfficeMarkers();

}

//]]

/script

/head

body onload="load()" onunload="GUnload()"

input type="button" onclick="deleteMarker()" value="delete marker #:" /

input type="text" id="markerNum" value="0" size="3"/

|

input type="button" onclick="clearMarkers()" value="clear all markers" /

|

input type="button" onclick="reloadMarkers()" value="reload all markers" /

br/

div id="map" style="width: 600px; height: 400px;"/div

/body

/html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

""

html xmlns="" xmlns:v="urn:schemas-microsoft-com:vml"

head

meta http-equiv="content-type" content="text/html; charset=utf-8"/

titleGoogle Maps JavaScript API Example: Advanced Directions/title

script src=" ;v=2.xkey=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"

type="text/javascript"/script

style type="text/css"

body {

font-family: Verdana, Arial, sans serif;

font-size: 11px;

margin: 2px;

}

table.directions th {

background-color:#EEEEEE;

}

img {

color: #000000;

}

/style

script type="text/javascript"

var map;

var gdir;

var geocoder = null;

var addressMarker;

function initialize() {

if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map_canvas"));

gdir = new GDirections(map, document.getElementById("directions"));

GEvent.addListener(gdir, "load", onGDirectionsLoad);

GEvent.addListener(gdir, "error", handleErrors);

setDirections("San Francisco", "Mountain View", "en_US");

}

}

function setDirections(fromAddress, toAddress, locale) {

gdir.load("from: " + fromAddress + " to: " + toAddress,

{ "locale": locale });

}

function handleErrors(){

if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)

alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)

alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)

alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) --- Doc bug... this is either not defined, or Doc is wrong

// alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_KEY)

alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)

alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

else alert("An unknown error occurred.");

}

function onGDirectionsLoad(){

// Use this function to access information about the latest load()

// results.

// e.g.

// document.getElementById("getStatus").innerHTML = gdir.getStatus().code;

// and yada yada yada...

}

/script

/head

body onload="initialize()" onunload="GUnload()"

h2Maps API Directions Illustrated/h2

form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false"

table

trth align="right"From: /th

tdinput type="text" size="25" id="fromAddress" name="from"

value="San Francisco"//td

th align="right"  To: /th

td align="right"input type="text" size="25" id="toAddress" name="to"

value="Mountain View" //td/tr

trthLanguage: /th

td colspan="3"select id="locale" name="locale"

option value="en" selectedEnglish/option

option value="fr"French/option

option value="de"German/option

option value="ja"Japanese/option

option value="es"Spanish/option

/select

input name="submit" type="submit" value="Get Directions!" /

/td/tr

/table

/form

br/

table class="directions"

trthFormatted Directions/ththMap/th/tr

tr

td valign="top"div id="directions" style="width: 275px"/div/td

td valign="top"div id="map_canvas" style="width: 310px; height: 400px"/div/td

/tr

/table

/body

/html

GoogleMap v3 API详解，该怎么解决

我曾经用这个做过google离线地图的展示和渲染，下面是相关代码：

加载本地地图的函数：

function LocalMapType() {}   

    LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);  

    LocalMapType.prototype.maxZoom = 13;  // 地图显示最大级别  

    LocalMapType.prototype.minZoom = 9;   // 地图显示最小级别  

    LocalMapType.prototype.name = "本地"; // 本地按钮，就是离线地图  

    LocalMapType.prototype.alt = "显示本地地图";  // 显示本地地图可能会出现不清晰的现象  

    LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {  

    var img = ownerDocument.createElement("img");      

    img.style.width = this.tileSize.width + "px";  

    img.style.height = this.tileSize.height + "px";  

    // 访问本地图片的算法，不同的地图切图工具对应的算法不同  

    var strURL = "gmap/tiles/" + zoom + "/" + coord.x + "/" + coord.y + ".png";   

    img.src = strURL;  

    return img;  

    };  

    var localMapType = new LocalMapType();

初始化地图函数：

function initialize() {  

    // 以该经纬度为中心居中显示，注意google 一般先写纬度，在写经度  

    var myLatlng = new google.maps.LatLng(30.51667,114.31667);   

    var myOptions = {  

      center: myLatlng,  

      zoom: 10,        // 初始化地图默认级别  

      streetViewControl: false,     // 默认不显示全景图  

      mapTypeControlOptions: {  

        mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP] // 地图类型为普通街道地图  

        }  

    };  

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);  

    map.mapTypes.set('local', localMapType);  

    map.setMapTypeId('local');  

    // 设置地图瓦片大小为256*256  

    map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));

html代码：

body onload="initialize()"  

    div id="map_canvas" style="width: 80%; height: 630px;"/div  

/body

在离线的情况下渲染离线地图：

1.加载图片：

var image = 'icon/0.png'; // 存放图片的路径  

    var myLatLng = new google.maps.LatLng(30.51667,114.31667); // 图片显示的地方  

    var beachMarker = new google.maps.Marker({  

    position: myLatLng,  

    map: map,  

    icon: image  

});

2.画折线：

var flightPlanCoordinates = [  

    new google.maps.LatLng(30.51667,114.31667),  

    new google.maps.LatLng(30.50667,114.32667),  

    new google.maps.LatLng(30.40667,114.30667)  

    ];  

    var flightPath = new google.maps.Polyline({  

       path: flightPlanCoordinates,  

       strokeColor: "#FF0000",  

       strokeOpacity: 1.0,  

       strokeWeight: 2  

    });  

    flightPath.setMap(map); // 如果想还原去掉折线用：flightMap.setMap(null)

3.画圆：

var citymap = {};    

   citymap['chicago'] = {    

   center: new google.maps.LatLng(31.18439, 121.49454),    

   population: 284259   

   };   

   citymap['newyork'] = {    

   center: new google.maps.LatLng(31.38439, 121.52454),    

   population: 814319   

   };  

   var cityCircle;  

   for (var city in citymap) {    

   var populationOptions = {    

     strokeColor: "#FF0000",    

     strokeOpacity: 0.8,    

     strokeWeight: 1,    

     fillColor: "#FF0000",    

     fillOpacity: 0.35,    

     map: map,    

     center: citymap[city].center,    

     radius: citymap[city].population / 1000    

   };    

   cityCircle = new google.maps.Circle(populationOptions);    

   }

4.画多边形：

// 如果是多边形，最后一个点不需要写成第一个点就可以自动连起来  

     var triangleCoords = [    

     new google.maps.LatLng(30.51667,114.31667),  

         new google.maps.LatLng(30.50667,114.42667),  

         new google.maps.LatLng(30.40667,114.30667)  

    ];    

    bermudaTriangle = new google.maps.Polygon({    

        paths: triangleCoords,    

        strokeColor: "#FF0000",    

        strokeOpacity: 0.8,    

        strokeWeight: 2,    

        fillColor: "#FF0000",    

        fillOpacity: 0.35    

    });    

    bermudaTriangle.setMap(map);

希望对你有用。

如何用Google离线API调用离线地图

建议使用腾讯离线图 腾讯离线图 非用 WiFi情况 载离线图 没网络候 使用腾讯图 用担用问题 另外告诉 识 使用腾讯离线图 节省90%流量哦 真 何采用离线 Google Map API 加载离线谷歌图

谷歌离线地图apicss代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于谷歌地图接入、谷歌离线地图apicss代码的信息别忘了在本站进行查找喔。