实现谷歌地点搜索并将标记保存到谷歌地图中的数据库答案

【问题标题】：Implement google place search and save marker to database in google map实现谷歌地点搜索并将标记保存到谷歌地图中的数据库
【发布时间】：2018-07-06 03:00:47
【问题描述】：

我想要达到的目标： 我想在谷歌地图中显示一个搜索框。当用户搜索某个位置时，结果会显示在地图框中。在地图上，当用户右键单击时，我想将标记存储在数据库中。

我尝试实施的资源

将标记存储到数据库： https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database

在地图中显示搜索框 https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

我尝试将这两者合二为一：这是我的最小代码

var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;

google.maps.event.addDomListener(window, 'load', map_initialize);

function map_initialize() {

  var map = new google.maps.Map(document.getElementById('map'), {
    center: mapCenter,
    zoom: 13,
    mapTypeId: 'roadmap'
  });

  google.maps.event.addListener(map, 'rightclick', function(event) {

    create_marker(event.latLng);
  });
}

function create_marker(MapPos) {

  var marker = new google.maps.Marker({
    position: MapPos,
    map: map
  });
}

#map {
  height: 200px;
}

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

使用此代码，当我在地图上单击鼠标右键时，什么都不会发生，即标记既不显示也不出现任何错误。

【问题讨论】：

标签： javascript jquery google-maps-api-3 geolocation

【解决方案1】：

map 变量需要可从您的 create_marker 函数访问，因此您在其他函数之外声明了它。但也在map_initialize 函数内。从那里删除var 声明，它将起作用。

我已编辑您的原始问题以包含 MCVE，这意味着我删除了您 90% 的代码以只保留您所追求的内容：在右键单击时添加标记。

请将此作为如何编写下一个问题的建议。

var mapCenter = new google.maps.LatLng(27.7172, 85.3240);

google.maps.event.addDomListener(window, 'load', map_initialize);

function map_initialize() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: mapCenter,
    zoom: 13,
    mapTypeId: 'roadmap'
  });

  google.maps.event.addListener(map, 'rightclick', function(event) {

    create_marker(event.latLng);
  });
}

function create_marker(MapPos) {

  var marker = new google.maps.Marker({
    position: MapPos,
    map: map
  });
}

#map {
  height: 200px;
}

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

【讨论】：