经典地图消失后,使用javascript创建谷歌地图

时间:2015-05-23 10:47:06

标签: google-maps google-maps-api-3

我不是专业人士,所以我的问题可能听起来很奇怪:我更喜欢使用java在我的网站上嵌入地图,所以我可以通过点击等添加事件:

<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.1471311,9.6500556),
zoom: "14",
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

当我使用经典地图时,我只使用了“预览”选项,因此我在窗口中移动地图然后导出所有信息,在那里我可以找到中心的坐标,缩放等。

现在我没有这个选项。我在谷歌中创建我的地图,导出KML所以我有所有图标的坐标,然后我开始猜测中心的坐标,所以我的地图适合我喜欢的方式(我不喜欢自动选项),我只是更改它们,上传在服务器上的变化,看看是否好看,所以我做了大约50次,直到找到一个完美的位置。还有另外一种方法吗?也许我错过了什么?

1 个答案:

答案 0 :(得分:2)

创建自己的&#34; linkto&#34; map,捕获中心并放大URL(或文本字段):

example

tutorial page from Mike Williams' v2 tutorial

代码段:

&#13;
&#13;
// Before we go looking for the passed parameters, set some defaults
// in case there are no patameters
var lat = 0;
var lng = 0;
var zoom = 0;
var maptype = google.maps.MapTypeId.ROADMAP;
var map = null;

function MapTypeId2UrlValue(maptype) {
  var urlValue = 'm';
  switch (maptype) {
    case google.maps.MapTypeId.HYBRID:
      urlValue = 'h';
      break;
    case google.maps.MapTypeId.SATELLITE:
      urlValue = 'k';
      break;
    case google.maps.MapTypeId.TERRAIN:
      urlValue = 't';
      break;
    default:
    case google.maps.MapTypeId.ROADMAP:
      urlValue = 'm';
      break;
  }
  return urlValue;
}

// ========== This function will create the "link to this page"
function makeLink() {
  var a = location + "?lat=" + map.getCenter().lat().toFixed(6) + "&lng=" + map.getCenter().lng().toFixed(6) + "&zoom=" + map.getZoom() + "&type=" + MapTypeId2UrlValue(map.getMapTypeId());
  document.getElementById("link").innerHTML = '<a href="' + a + '">Link to this page<\/a>';
  document.getElementById('centerZoom').innerHTML = a;
}

function initialize() {

  // ========== Read paramaters that have been passed in ==========


  // If there are any parameters at eh end of the URL, they will be in  location.search
  // looking something like  "?lat=50&lng=-3&zoom=10&type=h"

  // skip the first character, we are not interested in the "?"
  var query = location.search.substring(1);

  // split the rest at each "&" character to give a list of  "argname=value"  pairs
  var pairs = query.split("&");
  for (var i = 0; i < pairs.length; i++) {
    // break each pair at the first "=" to obtain the argname and value
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0, pos).toLowerCase();
    var value = pairs[i].substring(pos + 1).toLowerCase();
    // alert("argname="+argname+" ,value="+value);
    // process each possible argname
    if (argname == "lat") {
      lat = parseFloat(value);
    }
    if (argname == "lng") {
      lng = parseFloat(value);
    }
    if (argname == "zoom") {
      zoom = parseInt(value);
    }
    if (argname == "type") {
      // from the v3 documentation 8/24/2010
      // HYBRID This map type displays a transparent layer of major streets on satellite images. 
      // ROADMAP This map type displays a normal street map. 
      // SATELLITE This map type displays satellite images. 
      // TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
      if (value == "m") {
        maptype = google.maps.MapTypeId.ROADMAP;
      }
      if (value == "k") {
        maptype = google.maps.MapTypeId.SATELLITE;
      }
      if (value == "h") {
        maptype = google.maps.MapTypeId.HYBRID;
      }
      if (value == "t") {
        maptype = google.maps.MapTypeId.TERRAIN;
      }

    }
  }

  // ========== Create the map using the information obtained above ========
  var myOptions = {
    zoom: zoom,
    center: new google.maps.LatLng(lat, lng),
    mapTypeId: maptype
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);

  // Make the link the first time when the page opens
  makeLink();

  // Make the link again whenever the map changes
  google.maps.event.addListener(map, 'maptypeid_changed', makeLink);
  google.maps.event.addListener(map, 'center_changed', makeLink);
  google.maps.event.addListener(map, 'bounds_changed', makeLink);
  google.maps.event.addListener(map, 'zoom_changed', makeLink);
}


// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/example_linktothis.htm
//]]>

google.maps.event.addDomListener(window, 'load', initialize);
&#13;
<script src="http://maps.google.com/maps/api/js"></script>
<div id="centerZoom"></div>
<div id="map" style="width: 550px; height: 450px"></div>
<div id="link"></div>
&#13;
&#13;
&#13;