尝试使用 GoogleMaps Api (ReactJS) 让图钉出现在地图上答案

【问题标题】：Trying to get a pin to appear on map with GoogleMaps Api (ReactJS)尝试使用 GoogleMaps Api (ReactJS) 让图钉出现在地图上
【发布时间】：2017-07-07 15:33:39
【问题描述】：

我一直在尝试让这段代码正常工作，但遇到了一些问题。我正在使用节点模块：'google-maps-react'。主要错误是，无法读取“setMap”的属性。由于某种原因，标记没有显示在地图上。

import React, { PropTypes } from 'react';
import {GoogleApiWrapper, Marker, Map} from 'google-maps-react';

class Layout extends React.Component {

  render () {



    return (
      <div ref="map">
      <Map google={this.props.google}
        style={{width: '100%', height: '100%', position: 'relative'}}
        className={'map'}
        zoom={10}
        initialCenter={{lat: 32.7157, lng: -117.1611}}>
        <Marker
          name={'EMS'}
          position={{lat: 32.575258, lng: -117.061613}} />
        <Marker
          name={'FIRE'}
          position={{lat: 32.958337, lng: -117.096112}} />
        <Marker
          name={'HAZMAT'}
          position={{lat: 32.728588, lng: -117.100064}} />
        <Marker
          name={'MVA'}
          position={{lat: 32.556325, lng: -117.055856}} />
        <Marker
          name={'FIRE'}
          position={{lat: 32.691563, lng: -117.072024}} />
        <Marker
          name={'EMS'}
          position={{lat: 32.805941, lng: -117.219577}} />
        <Marker
          name={'HAZMAT'}
          position={{lat: 32.717516, lng: -117.164727}} />
        <Marker
          name={'MVA'}
          position={{lat: 32.715218, lng: -117.160156}} />
      </Map>



      </div>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyB0P-Ql1Gdvu0baPK4xmQMchXxQoUk4YH8'
})(Layout);

【问题讨论】：

标签： javascript google-maps reactjs google-maps-api-3 google-maps-markers

【解决方案1】：

就代码而言，它并不完全符合您的要求，但它可以完成工作并且做得非常好。我在您的代码中找不到错误，但确实遇到了很多信息，表明最新的 Google API 存在问题并通过 node.js 做出反应。所以我想到并使用了这个更简单的版本，希望它能够满足您的需求。我只添加了 8 个点中的 4 个，但您可以添加剩余的 4 个。

<!doctype html>
<html><head>
<meta charset="UTF-8">
	<title>Multiple Map Points</title> 
 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 800px; height: 800px;" position="relative;"></div>

  <script type="text/javascript">
    var locations = [
      ['EMS', 32.575258, -117.061613, 4],
      ['FIRE', 32.958337, -117.096112, 3],
      ['HAZMAT', 32.728588, -117.100064, 2],
	    ['MVA', 32.556325, -117.055856, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(32.7157, -117.1611),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>


</body>
</html>

【讨论】：

【解决方案2】：

您输入的代码是否与上面的完全一样？如果是这样，您必须获取然后输入 google api 密钥。您从google developers console 获取密钥。

【讨论】：

我已经获得了一个密钥并正确插入，我只是删除它，因为它是我的公司。