如何在 jquery-locationpicker-plugin 中为地图添加样式

Question

我正在使用这个非常有用的 Javascript 插件让用户在谷歌地图中选择一个点

https://github.com/Logicify/jquery-locationpicker-plugin

http://logicify.github.io/jquery-locationpicker-plugin/

很遗憾，地图无法自定义，并且具有默认样式。查看 js（未缩小），很明显代码使用的是 Google 地图，而且它不是很复杂。

我想知道是否有办法使用标准样式对象来设置地图样式

https://developers.google.com/maps/tutorials/customizing/styling-the-base-map

在适当的位置设置样式应该在 github repo 上建立一个分支

Answer 1

根据the documentation，您可以像这样访问本机 google.maps.Map 对象：

var mapContext = $('#us3').locationpicker('map');

这是对google.maps.Map的引用：

mapContext.map 

获得该参考后，您可以设置地图的样式属性：

mapContext.map.set('styles', [
  {
    stylers: [
      {hue: '#890000'},
      {visibility: 'simplified'},
      {gamma: 0.5},
      {weight: 0.5}
    ]
  },
  {
    elementType: 'labels',
    stylers: [{visibility: 'off'}]
  },
  {
    featureType: 'water',
    stylers: [{color: '#890000'}]
  }
]);

proof of concept fiddle

代码 sn-p：

var locationPickerRef = $('#us3').locationpicker({
  location: {
    latitude: 40.7127837,
    longitude: -74.0059413
  },
  radius: 300,
  inputBinding: {
    latitudeInput: $('#us3-lat'),
    longitudeInput: $('#us3-lon'),
    radiusInput: $('#us3-radius'),
    locationNameInput: $('#us3-address')
  },
  enableAutocomplete: true
})
var mapContext = $('#us3').locationpicker('map');
mapContext.map.set('styles', [{
  stylers: [{
    hue: '#890000'
  }, {
    visibility: 'simplified'
  }, {
    gamma: 0.5
  }, {
    weight: 0.5
  }]
}, {
  elementType: 'labels',
  stylers: [{
    visibility: 'off'
  }]
}, {
  featureType: 'water',
  stylers: [{
    color: '#890000'
  }]
}]);

console.log(locationPickerRef);

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/Logicify/jquery-locationpicker-plugin/master/dist/locationpicker.jquery.js"></script>
<div class="form-horizontal" style="width: 550px">
  <div class="form-group">
    <label class="col-sm-2 control-label">Location:</label>

    <div class="col-sm-10">
      <input type="text" class="form-control" id="us3-address" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Radius:</label>

    <div class="col-sm-5">
      <input type="text" class="form-control" id="us3-radius" />
    </div>
  </div>
  <div id="us3" style="<width:></width:> 550px; height: 400px;"></div>
  <div class="clearfix">&nbsp;</div>
  <div class="m-t-small">
    <label class="p-r-small col-sm-1 control-label">Lat.:</label>

    <div class="col-sm-3">
      <input type="text" class="form-control" style="width: 110px" id="us3-lat" />
    </div>
    <label class="p-r-small col-sm-2 control-label">Long.:</label>

    <div class="col-sm-3">
      <input type="text" class="form-control" style="width: 110px" id="us3-lon" />
    </div>
  </div>
  <div class="clearfix"></div>
</div>