javascript - 如何在 jquery-locationpicker-plugin 中向 map 添加样式

Question

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

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

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

不幸的是， map 不可自定义并且具有默认样式。查看 js(未缩小)，很明显代码正在使用 Google map ，而且，它并不是很复杂。

我想知道是否有一种方法可以使用标准样式对象来设置 map 样式

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

将样式设置到位就值得在 github 存储库上建立一个分支

Answer 1

每the documentation ，您可以像这样访问 native google.maps.Map 对象:

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

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

mapContext.map 

获得该引用后，您可以设置 map 的 styles 属性:

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

代码片段:

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>