如何在jquery locationpicker插件中为地图添加样式

How to add styling to the map in the jquery-locationpicker-plugin

本文关键字：地图 添加 样式 插件 jquery locationpicker      更新时间：2023-09-26

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

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

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

不幸的是，该地图是不可自定义的，并且具有默认样式。看看js（没有缩小），很明显代码使用的是谷歌地图，而且它不是很复杂。

我想知道是否有一种方法可以使用标准样式对象对地图进行样式设置

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

将样式设置到位将值得在github-reo 上进行分支

根据文档，您可以访问本机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'}]
  }
]);

概念验证小提琴

代码片段：

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>

相关文章：