利用 Google API 调用谷歌地图演示1

Posted 2020-07-01 人海灬

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用 Google API 调用谷歌地图演示1相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>演示1</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

html { height: 100%; }

body { height: 100%; margin: 0px; padding: 0px; }

#map_canvas { width:50%; height: 50%; margin: 50px auto; }

</style>

<script

type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAAtzdEfkm0e6fFv-EqYY-XJRQdNSJsfUEFgMWL1fb2TrZ8t0A2pRQ10wAqRsmxpdHzRsHswMJAFavZ6g"></

script>

<script type="text/javascript">

function initialize()

{

var latlng = new google.maps.LatLng(22.95, 113.4); /* 广州市番禺区，分别为纬度和经度，常德的经纬度为：29,111.7 */

var myOptions = {

zoom: 12, /* zoom 的取值范围为：0-19，表示范围最广，19表示范围最小但同时最详细 */

center: latlng,

//disableDefaultUI: true,     /* 是否禁用缩放滚动条和“地图”、“卫星”、“混合”、“地形”，默认为false */

mapTypeControl: true,           /* 是否出现“地图”、“卫星”、“混合”、“地形”，默认为true */

mapTypeControlOptions:

{

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,    /* 以下拉框的形式显示“地图”、“卫星”、“混合”、“地形”，默认值为“google.maps.MapTypeControlStyle.HORIZONTAL_BAR” */

position: google.maps.ControlPosition.RIGHT /* 显示的位置，默认为RIGHT */

},

navigationControl: true, /* 是否启用缩放滚动条，默认为true */

navigationControlOptions:

{

style: google.maps.NavigationControlStyle.SMALL, /* 已最简单的形式显示缩放滚动条 */

position: google.maps.ControlPosition.TOP_LEFT /* 显示的位置 */

},

scaleControl: true, /* 是否等比例缩放 */

scaleControlOptions:

{

/* position: google.maps.ControlPosition.TOP_LEFT */

},

mapTypeId: google.maps.MapTypeId.ROADMAP /* google.maps.MapTypeId.TERRAIN 表示“地形” */

/*

mapTypeControlOptions:

{

mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]

}

*/

};

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

}

</script>

</head>

<body onload="initialize()">

<div id="map_canvas">

</div>

</body>

</html>

以上是关于利用 Google API 调用谷歌地图演示1的主要内容，如果未能解决你的问题，请参考以下文章

利用高德地图显示google map

尽管有良好的API密钥，Google地图仍无法在我的网站上运行[关闭]

谷歌地图api訪问失败

javascript 调用谷歌地图API 输入地址点击弹出悬浮信息

谷歌地图 api 上的“新 google.maps.directionService()”错误

使用 Google 地图 api 的演示 android 应用程序崩溃

利用 Google API 调用谷歌地图 演示1

利用 Google API 调用谷歌地图演示1