如何在自己的网站上添加Google地图

发布网友发布时间：2022-04-26 23:39

共2个回答

懂视网时间：2022-04-20 06:22

如何在网站上添加谷歌定位信息？下面小编就为大家带来一篇在网站上添加谷歌定位信息的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧

我们可以很容易地使用HTML5导航对象获取当前位置。请按照以下步骤来获得城市/国家的细节。

首先包括jQuery库

JavaScript Code复制内容到剪贴板

<script type="text/javascript" src="jquery.js"></script> 
jQuery(function() { 
 //call navigator object to get latitude and logtitute 
 if(navigator.geolocation) { 
//getting current latitude and longtitude 
navigator.geolocation.getCurrentPosition(function(position) { 
 //get location details based on latitude and longtitude from Google 
 var jsonUrl = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude 
 jQuery.getJSON(jsonUrl , function( data ) { 
 var results = data.results[0]; 
  console.info(results); //check firebug 
 alert(results.address_components[5].long_name); //City 
 alert(results.address_components[6].long_name); //State 
 alert(results.address_components[7].long_name); //Country 
 }, 
 function(){ 
 alert('Failed to get Location Details...'); 
 }); 
return false; 
 }); 
 }});

热心网友时间：2022-04-20 03:30

先给出代码及显示效果.

这是一个最简单的谷歌地图 Demo.
只需要这样一小段代码,就可以在自己的网站上把谷歌地图模块加载进来.
解析各段代码的意义:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
这一行代码的意思是将google api以链接的形式引入到该页面上.这也是最主要的代码.如果没有这一句代码,下面的各个 google map 函数将不会被浏览器所认可.
function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);}

initialize 是一个加载初始化函数.当网页第一次被加载的时候会被调用,里面是对谷歌地图的地图等级,中心点进行相对的设置,同时将其放到自定义的 map-canvas div当中.
google.maps.event.addDomListener(window, 'load', initialize);
这句话的意思就是当网页加载完成后,去调用 initialize 函数.从而实现地图载并显示在网页里的效果.
下面的地图中,有一个定位点,点击该定位点,可以对其进行地图图层的放大操作,地图中心点的偏移操作.

这一段代码主要是添加标记到地图当中,然后对标记的点击事件做出响应.

google.maps.event.addListener(map, 'center_changed', function() { // 3 seconds after the center of the map has changed, pan back to the // marker. window.setTimeout(function() { map.panTo(marker.getPosition()); }, 3000); });

解析:
在地图上监听中心点变化时所触发的事件,意思就是说,当地图的中心点被移动到了别的地方,那么会在3秒后,回到以标记点为中心的地图上.
google.maps.event.addListener(marker,'click',function(){
map.setZoom(8);
map.setCenter(marker.getPosition());
});
解析:
对地图上的标记点进行点击的时候,会执行 function里面的函数,也就是将地图的图层等级设置为8,设置地图的中心点为 marker 标记的中心点.