是否可以为静态 Google Maps API 创建可自定义的中心点？答案

【问题标题】：Is it possible to create a customisable center point for a static Google Maps API?是否可以为静态 Google Maps API 创建可自定义的中心点？
【发布时间】：2017-12-21 19:07:18
【问题描述】：

我正在尝试编写接受两个用户输入（纬度和经度值）并使用 Google Maps API 加载相应的 Google Map 的代码。有什么方法可以创建一个根据输入的值而改变的静态谷歌地图？我尝试过使用 javascript API，但是我需要以图像格式显示地图。

（来自评论的代码）：

function pos() {
  alert("Your chosen coordinates are: (" + document.getElementById("lat").value + ", " + document.getElementById("long").value + ")");
  var lat = parseFloat(document.getElementById("lat").value);
  var long = parseFloat(document.getElementById("long").value);
  x = document.getElementById("button2") x.style.visibility = "visible";
  var mapProp = {
    center: new google.maps.LatLng(lat, long),
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp‌);
}

【问题讨论】：

您在寻找“静态地图”（图片）还是 Google Maps Javascript API v3 地图？您实现这一点的尝试是什么样的？为什么这被标记为 google-maps-api-2？
如果是静态地图，你看过the documentation for Static Maps吗？
我在找静态地图，代码如下：
function pos() { alert("你选择的坐标是：(" + document.getElementById("lat").value + ", " +document.getElementById("long").value + ")"); var lat = parseFloat(document.getElementById("lat").value); var long = parseFloat(document.getElementById("long").value); x=document.getElementById("button2") x.style.visibility="visible"; var mapProp = { center:new google.maps.LatLng(lat,long), zoom:20, mapTypeId:google.maps.MapTypeId.SATELLITE }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); }
请edit你的问题解决cmets，我在这里为你做了（在cmets中阅读代码真的很难。

标签： javascript html google-maps google-maps-api-2

【解决方案1】：

创建地图时，像这样传入一个中心对象

var map = new google.maps.Map(document.getElementById('map'), {
    center: {
        lat: -34,
        lng: 151
    }
}

或者以后这样设置

map.setCenter({lat: -34, lng: 151});

【讨论】：

【解决方案2】：

相关问题：

要根据动态输入制作静态地图，请使用 javascript 创建 URL：

function createStaticMap(map) {
  var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=512x512";
  staticMap += "&amp;maptype="+map.getMapTypeId();
  staticMap += "&amp;center="+map.getCenter().toUrlValue(6);
  staticMap += "&amp;zoom="+map.getZoom();
  document.getElementById('staticMap').innerHTML = staticMap;
  document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map' / > ";
  document.getElementById('urllen').innerHTML = "URL length =" + staticMap.length + " characters";
}

proof of concept fiddle

静态地图：

Google Maps Javascript API v3 地图：

代码 sn-p：

#googleMap {
  height: 500px;
  width: 500px;
  padding: 0px;
  margin: 0px;
}

static map:
<div id="imageholder"></div>
static map URL:
<div id="staticMap"></div>
<input id="lat" value="43" />
<input id="long" value="-72" /> Google Maps Javascript API v3 map:
<div id="googleMap"></div>
<input id="button2" type="button" value="show map" />
<script>
  function pos() {
    var lat = parseFloat(document.getElementById("lat").value);
    var long = parseFloat(document.getElementById("long").value);
    var mapProp = {
      center: new google.maps.LatLng(lat, long),
      zoom: 20,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    createStaticMap(map);
    google.maps.event.addDomListener(document.getElementById('button2'), 'click', function() {
      var lat = parseFloat(document.getElementById("lat").value);
      var long = parseFloat(document.getElementById("long").value);
      map.setCenter(new google.maps.LatLng(lat, long));
      createStaticMap(map);
    });
  }

  function createStaticMap(map) {
    var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=500x500";
    staticMap += "&amp;maptype=" + map.getMapTypeId();
    staticMap += "&amp;center=" + map.getCenter().toUrlValue(6);
    staticMap += "&amp;zoom=" + map.getZoom();
    document.getElementById('staticMap').innerHTML = staticMap;
    document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map' / > ";
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=pos"></script>

【讨论】：