网站上加谷歌地图，别问我为什么，你知道外贸网站吧

文章正文

网站上加谷歌地图，别问我为什么，你知道外贸网站吧

加入时间：2016/8/19 8:15:24

谷歌地图，一个国内不容易访问到的地图，为什么要加谷歌地图呢，当然给国外人看的，外贸网站，不过话说回来了，外国人到中国，又打开这个网站，“什么鬼？怎么地图看不到了，我到哪去找啊#￥%&*”哈哈哈，算了，还是看代码吧！

使用谷歌地图

第一步

访问 API 控制台（网址为 https://code.google.com/apis/console）并使用您的 Google 帐户登录。

第二步

在控制台中激活谷歌地图的相关服务，然后进入谷歌api库，选择Google 地图 API下的对应程序（我用的是Google Maps JavaScript API）

第三步

点击为此 API 创建凭据，即可生成相关api的密钥，然后在地图文件中引入该密钥，例如：

<script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?sensor=false&key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">  
</script>

上面YOUR_API_KEY就是通过第二步在谷歌官方获取的密钥

最后实际使用代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

</head>

<body onload="">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
   var marker,map;
   //var markersArray =[];
function initialize() {
   var tlatlng=new google.maps.LatLng(34.780973166074524,113.29302846862788)
var mapOptions = {
//设置经纬度
center: tlatlng,
zoom: 8,//地图的缩放度
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//创建一个地图
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
   marker = new google.maps.Marker({map:map,draggable:true});
   map.setCenter(tlatlng);
           marker.setPosition(tlatlng);
           marker.setTitle("备注标题");

//这部分代码是用了调试获得指定位置坐标用的
   google.maps.event.addListener(map, 'click', function(event) {
   console.log("X坐标："+event.latLng.lat()+",Y坐标："+event.latLng.lng());
addMarker(event.latLng,'Hello!');
})

}
   //这个方法配合获取坐标位置的代码可以点击地图添加标注
   function addMarker(location,title){
           marker = new google.maps.Marker({
           map: map,
           draggable:true,
           position: location,
           title:title
           });
           //markersArray.push(marker);
           }
   $(function(){
   initialize();
   })
</script>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

字体大小[ 大中小 ]

我的首页